All

Programming

HTML5 Canvas Cheat Sheet

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.

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