Examples Paint - Burn Canvas Games - Asteroids [Reloaded] Visualization - 500 Chrome Experiments Fractals - Canopy Image Manipulation - Destructive Video Disk Clock
Caution PG Programmer Guidance suggested Some material may be not be suitable for children. Those with a developed sense of API aesthetics may wish to leave the room.
Canvas, Context SCRIPT var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); // optional // do stuff with context SCRIPTEND
Image var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; context.rotate(0.3); img.addEventListener('load', function() { context.drawImage(img, 0.1, 0.1, 0.8, 0.8); });
Text context.font = '1px sans-serif'; context.scale(0.5, 0.5); context.lineWidth = 0.01; context.fillText('fill', 0, 1); context.strokeText('stroke', 0, 2);
Gradient var g = context.createLinearGradient(0.3, 0.3, 0.7, 0.7); g.addColorStop(0, '#f14a29'); g.addColorStop(0.6, 'white'); g.addColorStop(1, '#0092bf'); context.strokeStyle = g; context.lineWidth = 0.1; context.strokeRect(0.3, 0.3, 0.4, 0.4);
Pattern var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; context.rotate(0.3); context.rect(0.2, 0.2, 0.6, 0.6); context.rotate(-0.6); context.scale(0.0001, 0.0001); img.addEventListener('load', function() { var p = context.createPattern(img, 'repeat'); context.fillStyle = p; context.fill(); });
Alpha context.globalAlpha = 0.5; context.fillStyle = '#f14a29'; context.fillRect(0.2, 0.2, 0.4, 0.4); context.fillStyle = '#0092bf'; context.fillRect(0.4, 0.4, 0.4, 0.4);
lineWidth for (var i = 1;i < 10;i += 1) { context.beginPath(); context.lineWidth = i / 100.0; context.moveTo(0.1, i / 10.0); context.lineTo(0.9, i / 10.0); context.stroke(); }
lineCap context.lineWidth = 0.1; context.beginPath(); context.lineCap = 'butt'; context.moveTo(0.1, 0.2); context.lineTo(0.9, 0.2); context.stroke(); context.beginPath(); context.lineCap = 'round'; context.moveTo(0.1, 0.4); context.lineTo(0.9, 0.4); context.stroke(); context.beginPath(); context.lineCap = 'square'; context.moveTo(0.1, 0.6); context.lineTo(0.9, 0.6); context.stroke();
lineJoin context.lineWidth = 0.1; context.beginPath(); context.lineJoin = 'round'; context.strokeRect(0.1, 0.1, 0.8, 0.15); context.beginPath(); context.lineJoin = 'bevel'; context.strokeRect(0.1, 0.4, 0.8, 0.15); context.beginPath(); context.lineJoin = 'miter'; context.strokeRect(0.1, 0.7, 0.8, 0.15);
Clip var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; img.addEventListener('load', function() { context.save(); context.translate(0.5, 0.5); context.beginPath(); for (var a = 0; a < Math.PI*2;a += Math.random()) { context.save(); context.rotate(a); context.lineTo(Math.random() * 0.7, 0); context.restore(); } context.closePath(); context.clip(); context.fillStyle = 'black'; context.fillRect(-0.5, -0.5, 1,1); function r() {return Math.random() - 0.5;} for (var i = 0;i < 10;i++) { context.save(); context.translate(r(), r()); context.beginPath(); context.drawImage(img, -0.2, -0.2, 0.5, 0.5); context.restore(); } context.restore(); });
Ordering - path/transform context.moveTo(0, 0); context.translate(0.5, 0.5); context.lineTo(0, 0); context.stroke();
transform context.save(); context.lineWidth = 0.01; context.strokeStyle = 'black'; context.font = '1px sans-serif'; context.translate(0.5, 0.5); function r() {return Math.random() - 0.5;} var text = "Transform"; for (var i = 0;i < text.length;i++) { context.save(); context.transform(r(), r(), r(), r(), r(), r()); context.beginPath(); context.rect(-0.2, -0.2, 0.4, 0.4); context.stroke(); context.scale(0.4, 0.4); context.fillText(text[i], -0.3, 0.35); context.restore(); } context.restore(); context.beginPath();
Save/Restore context.save(); context.strokeStyle = '#0092bf'; context.rotate(0.3); context.rect(0.2, 0.2, 0.6, 0.6); context.stroke(); context.restore();
Without Save/Restore context.strokeStyle = '#0092bf'; context.rotate(0.3); context.rect(0.2, 0.2, 0.6, 0.6); context.stroke();
Shadow context.shadowColor = '#f14a29'; context.shadowOffsetX = 20; context.shadowOffsetY = 40; context.shadowBlur = 50; context.lineWidth = 0.05; context.strokeRect(0.3, 0.3, 0.4, 0.4);
Images context.rotate(0.3); var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; img.addEventListener('load', function() { context.drawImage(img, 0.1, 0.1, 0.8, 0.8); });
Slicing var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; img.addEventListener('load', function() { context.drawImage(img, 100, 70, 300, 350, 0.1, 0.1, 0.8, 0.8); });
Canvas -> Canvas SCRIPT function fixup(canvas) { canvas.width = (document.documentElement.clientWidth - 20) / 2; canvas.height = (document.documentElement.clientHeight - 40) / 2; var context = canvas.getContext('2d'); var scale = Math.min(canvas.width, canvas.height); context.scale(scale, scale); return context; } var sourceCanvas = document.getElementsByTagName('canvas')[0]; var destCanvas = document.getElementsByTagName('canvas')[1]; var sourceContext = fixup(sourceCanvas); var destContext = fixup(destCanvas); sourceContext.rotate(0.3); sourceContext.fillRect(0.3, 0.3, 0.4, 0.4); destContext.drawImage(sourceCanvas, 0.0, 0.0, 0.5, 0.5); destContext.drawImage(sourceCanvas, 0.5, 0.0, 0.5, 0.5); destContext.drawImage(sourceCanvas, 0.0, 0.5, 0.5, 0.5); destContext.drawImage(sourceCanvas, 0.5, 0.5, 0.5, 0.5); SCRIPTEND
Composition var img = new Image(512, 512); img.src = 'images/HTML5_Badge_512.png'; img.addEventListener('load', function() { context.drawImage(img, 0.1, 0.1, 0.6, 0.6); context.globalCompositeOperation = //'source-atop'; //'source-in'; //'source-out'; //'source-over'; // default //'destination-atop'; //'destination-in'; //'destination-out'; //'destination-over'; //'lighter'; //'copy'; 'xor'; context.drawImage(img, 0.3, 0.3, 0.6, 0.6); });
Higher Order Drawing draw('background', drawBackground, {origin: 'center'}); var drawBackground = function(context) {...}; var draw = function(id, f, options) { var canvas = document.getElementById(id); if (!canvas) { return; } try { var context = canvas.getContext("2d"); } catch(e) { throw new UnsupportedFeature("Canvas: " + e.toString()); } if (!context) { return; } context.save(); context.scale(canvas.width, canvas.height); if (!(options && 'clear' in options && !options.clear)) { context.clearRect(0, 0, 1, 1); } if (options && 'origin' in options && options.origin == 'center') { context.translate(0.5, 0.5); } f(context); context.restore(); };
Data-URL Save Me SCRIPT var canvas = document.getElementsByTagName('canvas')[0]; var a = document.getElementsByTagName('a')[0]; var context = canvas.getContext('2d'); context.fillRect(0, 0, 30, 30); a.href = canvas.toDataURL(); SCRIPTEND
Resources Justin Love's canvas bookmarks http://wondible.com/pub/canvas_cwc/ Canvas Deep Dive Source is Released Safari Canvas Docs Canvas Spec (Not all implemented)
Playground - bare SCRIPT var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); // optional SCRIPTEND