Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Canvas

4,453 views

Published on

Slideshow presented for Skilfer.com HTML5 Canvas course

  • Be the first to comment

HTML5 Canvas

  1. 1. March 19, 2012 7 – 9 PM CLASS WELCOME
  2. 2. HOST: APPNEXUSTHANK YOU
  3. 3. INTRODUCTION INSTRUCTOR ROBYN OVERSTREET
  4. 4. WHAT IS HTML5 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. 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. 6. CANVAS IN ACTION• Rough GuidesKEXP Archive Sketchpad Wired Mind NYC Restaurant Health Ratings Map
  7. 7. BROWSER SUPPORT• Firefox•Chrome•Safari•IE 9• See CanIUse.com for up-to-date support info
  8. 8. 2DDRAWING
  9. 9. THEGRID
  10. 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. 11. DRAWING A RECTANGLEcontext.fillStyle = "rgba(0, 204, 204, 1)";context.fillRect(40,50,110,70);
  12. 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 line 3. Draw line between1. Set start position points 2. Set end position
  13. 13. DRAWING CURVES Control point 1 Control point 2 bezierCurveTo(100,25 ... ...400,25... Start pointMoveTo(25,125) Destination point ...325,125);
  14. 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. 15. DRAWING ARCS 1.5 * PIStart angleStart anglePI 0 Center point End angle End angle Center point 0.5 * PI
  16. 16. DRAWING ARCS & CIRCLES• Circles are types of arcs• Angles are in radians (need to calculate between degrees and radians)ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2,true);ctx.closePath();ctx.fill(); Start angle Start angle End angle End angle
  17. 17. TEXT• Text is "drawn" to the canvas context.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. 18. TRANSFORMATION S
  19. 19. TRANSFORMATIONS• To change the orientation of one element on the canvas, you must shift the entire canvas• Translate: move the canvas and its origin to a different point in the grid• Rotate: rotate the canvas around the current origin
  20. 20. TRANSLATE CONTEXT Context moved. Context moved.The origin point nowThe origin point now has a new location. has a new location.
  21. 21. TRANSLATE & ROTATETranslate Rotatetranslate(x, y) rotate(angle)
  22. 22. THE STATE STACKState 1Fill Style: redRotation: 45deg State 2Fill Style: redRotation: 45deg State 1 save()tate 2Fill Style: blackLine Style: bluecale: 50% restore()cale: 50%
  23. 23. SAVE & RESTOREctx.fillRect(0,0,150,150); //Draw with default settingsctx.save(); // Save the default state ctx.fillStyle =#09F; //Change the fill color state 1ctx.fillRect(15,15,120,120); // Draw with new settingsctx.save(); //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. 24. IMAGEMANIPULATION
  25. 25. DRAW IMAGEvar img = new Image(); //Create an image objectimg.src =dog.png; //Set sourceimg.onload = function(){ //Wait for the image to load context.drawImage(img,x,y); //Draw image to canvas}
  26. 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. 27. IMAGES AT THE PIXEL LEVELGet image data and loop through pixel by pixel
  28. 28. LOOPING THROUGH PIXELSc.drawImage(img,0,0);var imgData =c.getImageData(0,0,canvas.width,canvas.height);for(n=0; n<data.width*data.height; n++) {var index =n*4; //each pixel has 4 data points//rgb values from 0-255red = imgData.data[index];green = imgData.data[index+1];blue= imgData.data[index+2];alpha = imgData.data[index+3];//to reset pixels, change the values in the data arrayimgData.data[index+2] = 255; //change the blue value}}
  29. 29. ANIMATION
  30. 30. ANIMATIONCanvas doesnt track objects on the screen –You must redraw the stage for each movement Use event listeners or timers
  31. 31. FOLLOW THE MOUSE• Draw the image on the canvas• Track the position of the mouse (event listener for every mouse move)• Redraw the image every n seconds based on the x position of the mouse
  32. 32. VISUALIZE DATAUSE JSON DATA TO CREATEDYNAMIC DRAWINGSCONNECT TO A WEB SERVICE(TWITTER, FOURSQUARE, ETC)
  33. 33. BAR CHART
  34. 34. MAP DATA TO CANVAS//the data could also come in as a JSON objectvar data = {jane: 231,julie: 325,ben: 276}; //js objectvar highest_value = 325; //find programmaticallyvar pixel_units = canvas.height/highest_value;for (user in data){ //loop through data pointsvar bar_height = data[user] * pixel_units;var bar_title = user;}//now its time to draw!
  35. 35. COOL EXAMPLEEach bubble represents a tweet containing the word "water". Popping thebubble displays the tweet.
  36. 36. GRAPHING LIBRAIRIES• jQuery VisualizeAwesomeChartJS ... many more• ... many more
  37. 37. MOBILE TIPS• Javascript touch events instead of mouse events• PhoneGap Framework to compile to native iOS and Android apps
  38. 38. CANVASGAMES
  39. 39. GAMES EXAMPLES• Alex the Alligator http://alex4.tapjs.com• CATcher http://wpsystem.com.br/catcher/• Catch the goblin http ://www.lostdecadegames.com/how-to-make-a- simple-html5-canvas-game/• Magician Fairy Rescue http://www.relfind.com/game/magician.html• Canvas Rider, bike game http://canvasrider.com/
  40. 40. CANVAS RIDER
  41. 41. ORBIUM
  42. 42. SIMPLE GAME EXAMPLE
  43. 43. CODING GOBLINS1.Draw images for background, player, and goblin2.Listen for arrow keys and change player coordinates accordingly3.Detect hit by comparing monsters coordinates to players coordinates4.Redraw as frequently as possible
  44. 44. 3DDRAWING
  45. 45. 3D IN CANVAS
  46. 46. 3D• A few options:• Canvas 3D context• Canvas WebGL context• Simulated 3D in 2D context• Libraries ... three.js, c3dl, k3d, Sylvester
  47. 47. WebGL CONTEXTvar canvas = document.getElementById("glcanvas");// Use standard WebGL context or experimental if its notavailablegl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");// Define initial WebGL settingsif (gl) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);}// It gets more complex from here!
  48. 48. LIBRARIES• KineticJS Canvas drawing & animation library• Three.JS 3D library• Processing.js Port of Processing environment• GLGE WebGL library• melonJS game engine• ImpactJS game engine
  49. 49. PROCESSING.js• Reads files from Processing programming environment• Uses processing-like code in Javascript• More flexibility with objects -- collisions, mouseover, etc
  50. 50. KINETIC JS• Dynamically creates a series of canvaselements as "layers"• Provides a Stage class and code similar toActionscript• Allow easy object moving, dragging, andtracking
  51. 51. LEARNINGRESOURCESBEST LIBRARIESTUTORIALS& TOP EXAMPLES
  52. 52. Q&A
  53. 53. THANK YOU! Robyn Overstreet & Jovena Whatmoor

×