HTML5 Canvas

  • Published on

  • View

  • Download

Embed Size (px)


Slideshow presented for HTML5 Canvas course


  • 1. March 19, 20127 9 PM CLASSWELCOME

2. HOST: APPNEXUSTHANK YOU 3. INTRODUCTION INSTRUCTOR ROBYN OVERSTREET 4. WHAT ISHTML5 CANVAS? HTML5 element, now part of HTML5 API Used for drawing and animating directly in HTML, withJavaScript scripting Originally developed by Apple for Dashboard widgets 5. WHAT CAN IT DO? Dynamically draw shapes, images and text Respond to user input mouse, keyboard, touch, etc. Animation without Flash Create interactive charts and graphs 6. CANVAS IN ACTION Rough GuidesKEXP Archive Sketchpad WiredMind NYC Restaurant Health Ratings Map 7. BROWSER SUPPORT FirefoxChromeSafariIE 9 See for up-to-date support info 8. 2DDRAWING 9. THEGRID 10. SET-UP FOR DRAWING grab the canvas elementvar mycanvas = document.getElementById("the_canvas");var context = mycanvas.getContext("2d");set up a 2D context 11. DRAWING A RECTANGLEcontext.fillStyle = "rgba(0, 204, 204, 1)";context.fillRect(40,50,110,70); 12. DRAWING LINES context.beginPath(); //set up to draw a path context.moveTo(x,y); //move to the start position context.lineTo(x,y); //set the end pointcontext.stroke(); //draw the line3. Draw line between1. Set start positionpoints2. Set end position 13. DRAWING CURVESControl point 1Control point 2 bezierCurveTo(100,25 ... ...400,25...Start pointMoveTo(25,125)Destination point...325,125); 14. CODING CURVESvar controlPt1 = {x:110,y:30};var controlPt2 = {x:130,y:80};var startPt = {x:75,y:140};ctx.beginPath(); //prepare pathctx.moveTo(startPt.x,startPt.y);ctx.bezierCurveTo(controlPt1.x,controlPt1.y,controlPt2.x,controlPt2.y,startPt.x,startPt.y);ctx.stroke(); 15. DRAWING ARCS 1.5 * PIStart angleStart anglePI 0Center point End angle End angleCenter point 0.5 * PI 16. DRAWING ARCS & CIRCLES Circles are types of arcs Angles are in radians (need to calculatebetween degrees and radians)ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2,true);ctx.closePath();ctx.fill();Start angleStart angleEnd angle End angle 17. TEXT Text is "drawn" to the canvascontext.fillText("Hello world", 10, 50); Style text in CSS syntax with .font property Get the dimensions of a text areatextObj = ctx.measureText(d);width = textObj.width; 18. TRANSFORMATIONS 19. TRANSFORMATIONS To change the orientation of one element onthe canvas, you must shift the entire canvas Translate: move the canvas and its origin to adifferent point in the grid Rotate: rotate the canvas around the currentorigin 20. TRANSLATE CONTEXTContext moved. Context moved.The origin point nowThe origin point now has a new location. has a new location. 21. TRANSLATE & ROTATETranslate Rotatetranslate(x, y) rotate(angle) 22. THE STATE STACKState 1Fill Style: redRotation: 45deg State 2Fill Style: redRotation: 45degState 1save()tate 2Fill Style: blackLine Style: bluecale: 50% restore()cale: 50% 23. SAVE & RESTOREctx.fillRect(0,0,150,150); //Draw with default; // Save the default statectx.fillStyle =#09F; //Change the fill color state 1ctx.fillRect(15,15,120,120); // Draw with new; //Save the current statectx.fillStyle = #FFF; //Change fill againctx.fillRect(15,15,120,120); // Draw with new settings state 2ctx.restore(); //Restore to last saved statectx.fillRect(45,45,60,60); //Draw with restored settings back to state 2 24. IMAGEMANIPULATION 25. DRAW IMAGEvar img = new Image(); //Create an image objectimg.src =dog.png; //Set sourceimg.onload = function(){ //Wait for the image to loadcontext.drawImage(img,x,y); //Draw image to canvas} 26. REDRAW IMAGE//clear the stageclearRect(0,0,canvas.width,canvas.height);speed = 10;if (previous_x < mouse_x){direction = 1; //moving left to right} else {direction = -1; //moving right to left}var new_x = previous_x + (speed * direction);context.drawImage(img,new_x,y); 27. IMAGES AT THE PIXEL LEVELGet image data and loop through pixel by pixel 28. LOOPING THROUGH PIXELSc.drawImage(img,0,0);var imgData =c.getImageData(0,0,canvas.width,canvas.height);for(n=0; n