HTML5 References

This cheat sheet summarizes the complete HTML5 Canvas API for the 2D context, based on to the W3C HTML5 Canvas Spec. It also provides techniques for handling common proceedures.

  • HTML5 Canvas Element

    Html5 canvas element

    <canvas id="myCanvas" width="500" height="300">

    Html5 canvas element with fallback content

    <canvas id="myCanvas" width="500" height="300">
    your browser doesn't support canvas!
    </canvas>

    2d context

    var context = canvas.getContext('2d');

    Webgl context (3d)

    var context = canvas.getContext('webgl');

  • Shapes

    Draw rectangle

    context.rect(x, y, width, height);
    context.fill();
    context.stroke();

    Fill rectangle shorthand

    context.fillRect(x, y, width, height);

    Stroke rectangle shorthand

    context.strokeRect(x, y, width, height);

    Draw circle

    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();

  • Styles

    Fill

    context.fillStyle = 'red';
    context.fill();

    Stroke

    context.strokeStyle = 'red';
    context.stroke();

    Linear gradient

    var grd = context.createLinearGradient(x1, y1, x2, y2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    Radial gradient

    var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    Pattern

    var imageObj = new Image();
    imageObj.onload = function() {
    var pattern = context.createPattern(imageObj, 'repeat');
    context.fillStyle = pattern;
    context.fill();
    };
    imageObj.src = 'path/to/my/image.jpg';

    Line Join

    context.lineJoin = 'miter|round|bevel';

    Line Cap

    context.lineCap = 'butt|round|square';

    Shadow

    context.shadowColor = 'black';
    context.shadowBlur = 20;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;

    Alpha (Opacity)

    context.globalAlpha = 0.5; // between 0 and 1

  • Color Formats

    String

    context.fillStyle = 'red';

    Hex Long

    context.fillStyle = '#ff0000';

    Hex Short

    context.fillStyle = '#f00';

    RGB

    context.fillStyle = 'rgb(255,0,0)';

    RGBA

    context.fillStyle = 'rgba(255,0,0,1)';

  • Paths

    Begin Path

    context.beginPath();

    Line

    context.lineTo(x, y);

    Arc

    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

    Quadratic curve

    context.quadraticCurveTo(cx, cy, x, y);

    Bezier curve

    context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

    Close Path

    context.closePath();

  • Images

    Draw Image with default size

    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
    };
    imageObj.src = 'path/to/my/image.jpg';

    Draw image and set size

    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'path/to/my/image.jpg';

    Crop image

    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
    };
    imageObj.src = 'path/to/my/image.jpg';

  • Text

    Fill Text

    context.font = '40px Arial';
    context.fillStyle = 'red';
    context.fillText('Hello World!', x, y);

    Stroke Text

    context.font = '40pt Arial';
    context.strokeStyle = 'red';
    context.strokeText('Hello World!', x, y);

    Bold Text

    context.font = 'bold 40px Arial';

    Italic Text

    context.font = 'italic 40px Arial';

    Text Align

    context.textAlign = 'start|end|left|center|right';

    Text Baseline

    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
    |bottom';

    Get Text Width

    var width = context.measureText('Hello world').width;

  • Transforms

    Translate

    context.translate(x, y);

    Scale

    context.scale(x, y);

    Rotate

    context.rotate(radians);

    Flip Horizontally

    context.scale(-1, 1);

    Flip Vertically

    context.scale(1, -1);

    Custom Transform

    context.transform(a, b, c, d ,e, f);

    Set Transform

    context.setTransform(a, b, c, d ,e, f);

    Shear

    context.transform(1, sy, sx, 1, 0, 0);

    Reset

    context.setTransform(1, 0, 0, 1, 0, 0);

  • State Stack

    Push State onto Stack

    context.save();

    Pop State off of Stack

    context.restore();

  • Clipping

    Clip

    // draw path here
    context.clip();

  • Image Data

    Get Image Data

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;

    Loop Through Image Pixels

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var len = data.length;
    var i, red, green, blue, alpha;

    for(i = 0; i < len; i += 4) {
    red = data[i];
    green = data[i + 1];
    blue = data[i + 2];
    alpha = data[i + 3];
    }

    Loop Through Image Pixels With Coordinates

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var x, y, red, green, blue, alpha;

    for(y = 0; y < imageHeight; y++) {
    for(x = 0; x < imageWidth; x++) {
    red = data[((imageWidth * y) + x) * 4];
    green = data[((imageWidth * y) + x) * 4 + 1];
    blue = data[((imageWidth * y) + x) * 4 + 2];
    alpha = data[((imageWidth * y) + x) * 4 + 3];
    }
    }

    Set Image Data

    context.putImageData(imageData, x, y);

  • Data URLs

    Get Data URL

    var dataURL = canvas.toDataURL();

    Render Canvas with Data URL

    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    };

    imageObj.src = dataURL;

  • Composites

    Composite Operations

    context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

Source: http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/