HTML5 Canvas Cheat Sheet

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. Source was cheatsheetworld.com/programming/html5-canvas-cheat-sheet

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';

Back