Small powerpoint mockup of the HTML5 Canvas presentation I gave at the Microsoft Web Cafe.

1. <canvas>

2. /*** CANVAS* */(function() {var my = {};my.name = 'Stijn Van Minnebruggen';my.work = 'Multimedia developer at These Days Antwerp';my.hobbies = 'Passionate about photography, graphic design, typography and music.';my.tweets = 'twitter.com/donotfold';my.website = 'donotfold.be';

3. varabout = {};about.canvas= 'The Canvas element allows dynamic rendering of 2D shapes and bitmap images in the browser'; about.html5 = 'Canvas is part of HTML5 and introduced in 2004';about.how= 'The shapes and images that are drawn on the canvas are scriptable with Javascript';

4. <canvas width="300" height="250"> This text is displayed if your browser does not support canvas. </canvas>

5. <canvas id="myFirstCanvas" width="300" height="250"> This text is displayed if your browser does not support canvas. </canvas> <p><a href="#" onclick="drawIt();">Click me to draw rectangle</a></p> <script> function drawIt() {varmyFirstCanvas = document.getElementById("myFirstCanvas");var context = myFirstCanvas.getContext("2d");context.fillStyle = 'rgb(255,0,0)';context.fillRect(50, 25, 100, 150); } </script>

6. // basic context methodscontext.fillStyle = "property"; // css color, pattern or gradient (default: black)context.fillRect(x, y, width, height); // draws a rectangle with the current fillStylecontext.strokeStyle = "property"; // allows same properties as fillStylecontext.strokeRect(x, y, width, height); // draws a rectangle with the current strokeStyle(no fill)context.clearRect(x, y, width, height); // clears the pixels in the specified rectangle

7. // strokes // 1. define start point // 2. define end point // 3. set optional styles // 4. draw linecontext.moveTo(x, y); // move the pencil to the starting pointcontext.lineTo(x, y); // imagine a line from the starting point to this ending pointcontext.strokeStyle = "property"; // set same style properties as before if you want context.stroke(); // draw the actual line

8. context.beginPath(); context.moveTo(0,0);context.lineTo(0,100);context.lineTo(100,100);context.lineTo(100,0);context.lineTo(0,0);context.stroke();

9. // gradients // fill or stroke styles allow gradientsvarmyLinearGradient = context.createLinearGradient(x0, y0, x1, y1);varmyRadialGradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1); // make as many color stops as you like, between 0 and 1myLinearGradient.addColorStop(0, "black"); myLinearGradient.addColorStop(1, "white"); // add the gradient to the style propertycontext.fillStyle= myLinearGradient;

10. // imagesvarmyImage = new Image();myImage.src = "img/html5.png";myImage.onload = function() {context.drawImage(myImage, 0, 0); };

11. // event listenerscanvas.addEventListener("click", drawIt, false); function drawIt(e) {varcursorPosition = getCursorPosition(e);var x = cursorPosition.x;var y = cursorPosition.y;var w = x+10;var h = y+10;context.fillRect(x, y, w, h); } function getCursorPosition(e) {var x, y; if(e.pageX != undefined && e.pageY != undefined) { x = e.pageX; y = e.pageY; } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } x -= canvas.offsetLeft; y -= canvas.offsetTop; return { "x": x, "y": y };}

12. // animationvarmyIterval = setInterval(function() {drawIt(); }, 500);

13. // safer animationvarmyTimeout = setTimeout(loop, 500);var loop = function() {drawIt();clearTimeout(myTimeout);myTimeout = setTimeout(loop, 500);});

14. // best animationwindow.requestAnimFrame= (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){window.setTimeout(callback, 1000 / 60); }; })();

15. // TUTORIALS http://diveintohtml5.org/canvas.html // base for this presentation http://billmill.org/static/canvastutorial/index.html // pong tutorial http://html5doctor.com/an-introduction-to-the-canvas-2d-api/ // TOOLS http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html // cheat sheet http://visitmix.com/labs/ai2canvas/ // AI to Canvas // DEMOS http://www.20thingsilearned.com // good integration http://www.frameratefest.com // canvas contest http://demo.thesedays.com // background effect http://easeljs.com// game demos http://soulwire.co.uk/hello // experiments http://9elements.com/io/projects/html5/canvas/})();