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