/tielifa

Javascript canvas rendering context 2d implement with webgl

Primary LanguageJavaScriptMIT LicenseMIT

[TOC]

What's TieLiFa

TieLiFa(铁力发) is a library implements Javascript canvas rendering context 2d with webgl.

How to use

Import tielifa.js or tielifa.min.js, create a new context object like this :

let canvas = document.getElementById('someid');// Get the canvas element object
let ctx = new tielifa.WebGL2D(canvas);

Use this ctx to draw something like the CanvasRendingContext2D.

CanvasRendingContext2D:

ctx.save();
ctx.translate(10,10);
ctx.fillStyle = 'red';
ctx.rect(0,0,100,100);
ctx.fill();
ctx.restore();

TieLiFa:

ctx.save();
ctx.translate(10,10);
ctx.fillStyle = 'red';
ctx.rect(0,0,100,100);
ctx.fill();
ctx.restore();

ctx.draw();

TieLiFa does not paint immediately when user invoke fill,stroke or drawImage, it need user to invoke draw method.

API

NOTE: Every example does't have HTML code , the canvas instance was generated by 'test.js' which created by me, one canvas id is 'webgl' , another one is 'canvas'.

Canvas2D API

TieLiFa implemented canvas 2d some frequently used methods and properties ,such as fillStyle,drawImage , fillRect and so on , you can check what's TieLiFa has implemented from this tabel.

Extended Functions:

drawRectangle

Syntax

void drawRectangle(x, y, w, h, fillColor, strokeColor)

Paramaters

x The x-axis coordinate of the rectangle left-top point.

y The y-axis coordinate of the rectangle left-top point.

w Rectangle width.

h Rectangle height.

fillColor The color of filling of the rectangle.(Optional)

strokeColor The color of the rectangle's border.(Optional)

Examples

Draw a 200x150 size red rectangle with white border.

    // webgl is a canvas instance
    let ctx = new tielifa.WebGL2D(webgl);
    ctx.drawRectangle(100, 100, 200, 150, 'red', 'white');
    ctx.draw();

Result on codepen : Draw Rectangle


drawEllipse

Syntax

void drawEllipse(x, y, r1, r2, fillColor, strokeColor, rotation)

Paramaters

x The x-axis coordinate of the ellipse's center point.

y The y-axis coordinate of the ellipse's center point.

r1 The x-axis radius.

r2 The y-axis radius.

fillColor The color of filling of the ellipse.(Optional)

strokeColor The color of the ellipse's border.(Optional)

rotation The rotated radian of the ellipse.(Optional)

Examples

Draw a 200x50 size red ellipse with white border , and rotate 45 degree.

    // webgl is a canvas instance
    let ctx = new tielifa.WebGL2D(webgl);
    ctx.drawEllipse(200, 200, 200, 50, 'red', 'white',45*Math.PI/180);
    ctx.draw();

Result on codepen : Draw Ellipse


drawCircle

Syntax

void drawCircle(x, y, r, fillColor, strokeColor)

Paramaters

x The x-axis coordinate of the circle's center point.

y The y-axis coordinate of the circle's center point.

r The circle's radius.

fillColor The color of filling of the ellipse.(Optional)

strokeColor The color of the ellipse's border.(Optional)

Examples

Draw a 200 radius red circle with white border.

    // webgl is a canvas instance
    let ctx = new tielifa.WebGL2D(webgl);
    ctx.drawCircle(200, 200, 200, 'red', 'white');
    ctx.draw();

Result on codepen : Draw Circle


fillStripe

Use a set points to define a stripe path , and fill this stripe with color or image

Syntax

void fillStripe(points, stripeWidth, color, opacity, image, applyTransform)

Paramaters

points The stripe's path points. Each point's data struct is {x:number,y:number,z:number}, thezis optional.

stripeWidth The width of this stripe.

color The fill color string of this stripe, if don't provide this value , its default value is 'white'.(Optional)

opacity Opacity of this stripe.(Optional)

image Use a image to fill this stripe, if the color paramater is not null or 'white', the image will blend with the color.(Optional)

applyTransform It's a boolean value, if it's true , the stripe's position will apply current context state's transform.(Optional)

Examples

Draw a fluttering image

    // webgl is a canvas instance
    
    let ctx = new tielifa.WebGL2D(webgl, {FOV:20,projectionType: 1, enableDepthTest: true});
    let r = 30;
    let points = [];
    let offset = 0;

    function draw() {
        ctx.save();
        ctx.translate(webgl.width / 2, webgl.height / 2);
        ctx.rotateY(r * Math.PI / 180);
        ctx.rotateX(r * Math.PI / 180);
        ctx.rotate(r * Math.PI / 180);
        ctx.translate(-webgl.width / 2, -webgl.height / 2);
        points.length = 0;
        let width = webgl.width / 3;
        let height = (img.height / img.width) * width;
        let delta = Math.PI / 15;
        let pointsNum = 50;
        let deltaX = width / pointsNum;
        let totalPI = Math.PI * 2 * 3;
        let deltaTheta = totalPI / pointsNum;
        let startX = (webgl.width - width) / 2;

        for (let i = 0; i < pointsNum; i++) {
            let x = startX + deltaX*i;
            let y = Math.cos(i * deltaTheta + offset) +webgl.height / 2;
            let z =  Math.cos(i * deltaTheta + offset) * 15;
            let p = {x: x, y: y, z: z};
            pre = p;
            points.push(p);
        }
        ctx.fillStripe(points, height, 'white', 1,img);
        r+=0.2;
        ctx.restore();
        ctx.draw();
        offset += 0.15;//delta / 10;
        requestAnimationFrame(draw);
    }

    let img = new Image();
    img.onload = function (evt) {
        draw();
    };
    img.crossOrigin = '';
    img.src = 'https://eclipseglory.github.io/norway.png'

Result on codepen : Use fillStripe


rotateX

Rotate with x-aixs.

Syntax

void rotateX(radian)

Paramaters

radian Rotate degree.

Examples

Draw a 200x200 size rectangle and make it rotate 5 degree with its center point.

    // webgl is a canvas instance
    let ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
    ctx.translate(200,200);
    ctx.rotateY(5*Math.PI/180);
    ctx.rotateX(5*Math.PI/180);
    ctx.translate(-200,-200);
    ctx.drawRectangle(100, 100, 200, 200,'red');
    ctx.draw();

Result on codepen : RotateX and RotateY


rotateY

Rotate with y-aixs.

Syntax

void rotateY(radian)

Paramaters

radian Rotate degree.

Examples

Draw a 200x200 size rectangle and make it rotate 5 degree with its center point.

    // webgl is a canvas instance
    let ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
    ctx.translate(200,200);
    ctx.rotateY(5*Math.PI/180);
    ctx.rotateX(5*Math.PI/180);
    ctx.translate(-200,-200);
    ctx.drawRectangle(100, 100, 200, 200,'red');
    ctx.draw();

Result on codepen : RotateX and RotateY


Extended Property:

filterType

Can apply a filter on a image. There are around 10 filter type provided by TieLiFa , such as Sharpness_Filter,Emboss_Filter and so on.

Syntax

ctx.filterType

Examples

Draw two 200x200 size images , one apply Emboss filter , another don't apply filter:

    // webgl is a canvas instance
    var ctx = new tielifa.WebGL2D(webgl,{projectionType:1});
    var img = new Image();
    img.onload = function (evt) {
      ctx.filterType = tielifa.WebGL2D.Emboss_Filter;
      ctx.drawImage(img,100,100,200,200);
      ctx.filterType = tielifa.WebGL2D.Normal_Filter;
      ctx.drawImage(img,300,100,200,200);
      ctx.draw();
    };
    img.crossOrigin = '';
    img.src = 'https://eclipseglory.github.io/candy.png'

Result on codepen : Emboss or normal


What TieLiFa implements

Property Support Example
canvas ✔️
fillStyle ✔️ fill a rectangle
font
globalAlpha ✔️ two rectangles
globalCompositeOperation
imageSmoothingEnabled
lineCap
lineDashOffset
lineJoin
lineWidth ✔️ rect and line
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle ✔️ rect and line
textAlign ✔️
textBaseline ✔️
Method Support Example
arc() ✔️ some arcs
arcTo() ✔️ change arc radius
beginPath() ✔️ tow lines
bezierCurveTo() ✔️ cubic bezier
clearRect() ⚠️ just clear whole canvas
clip()
closePath() ✔️ a triangle
createImageData() ✔️
createLinearGradient()
createPattern()
createRadialGradient()
drawFocusIfNeeded()
drawImage() ✔️ rotating image
ellipse() ✔️ Example1 Example2
fill() ✔️ fill a rectangle
fillRect() ✔️ two rectangles
fillText() ✔️
getImageData()
getLineDash()
isPointInPath()
isPointInStroke()
lineTo() ✔️ tow lines
measureText() ✔️
moveTo() ✔️ tow lines
putImageData()
quadraticCurveTo() ✔️ quadratic bezier
rect() ✔️ rect and line
restore() ✔️ save/restore color
rotate() ✔️ rotate rectangle
save() ✔️ save/restore color
scale() ✔️ scale rect
setLineDash()
setTransform() ✔️ skewing rect
stroke() ✔️ tow lines
strokeRect() ✔️
strokeText()
transform() ✔️ skewing rect
translate() ✔️ rotating image