Download - HTML5 Canvas
![Page 1: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/1.jpg)
7 – 9 PM CLASS
WELCOME
March 19, 2012
![Page 2: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/2.jpg)
HOST: APPNEXUS
THANK YOU
![Page 3: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/3.jpg)
INSTRUCTOR
ROBYN OVERSTREET
INTRODUCTION
![Page 4: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/4.jpg)
WHAT ISHTML5 CANVAS?
• HTML5 element, now part of HTML5 API
• Used for drawing and animating directly in HTML, with JavaScript scripting
• Originally developed by Apple for Dashboard widgets
![Page 5: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/6.jpg)
CANVAS IN ACTION
• Rough GuidesKEXP Archive Sketchpad Wired Mind NYC Restaurant Health Ratings Map
![Page 7: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/7.jpg)
BROWSER SUPPORT
• Firefox•Chrome•Safari•IE 9
• See CanIUse.com for up-to-date support info
![Page 8: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/8.jpg)
2D DRAWING
![Page 9: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/9.jpg)
THE GRID
![Page 10: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/10.jpg)
SET-UP FOR DRAWING
var mycanvas = document.getElementById("the_canvas");
var context = mycanvas.getContext("2d");
grab the canvas element
set up a 2D context
![Page 11: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/11.jpg)
DRAWING A RECTANGLEcontext.fillStyle = "rgba(0, 204, 204, 1)";
context.fillRect(40,50,110,70);
![Page 12: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/12.jpg)
DRAWING LINES
1. Set start position
2. Set end position
3. Draw line between points
context.beginPath(); //set up to draw a pathcontext.moveTo(x,y); //move to the start positioncontext.lineTo(x,y); //set the end pointcontext.stroke(); //draw the line
![Page 13: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/13.jpg)
DRAWING CURVES
Start pointMoveTo(25,125)
Control point 1bezierCurveTo(100,25 ...
Control point 2...400,25...
Destination point...325,125);
![Page 14: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/14.jpg)
CODING CURVES
var 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();
![Page 15: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/15.jpg)
DRAWING ARCS
Start angleStart angleStart angleStart angle
End angleEnd angleEnd angleEnd angle
0
1.5 * PI
PI
0.5 * PI
Center pointCenter pointCenter pointCenter point
![Page 16: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/16.jpg)
ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill();
DRAWING ARCS & CIRCLES
• Circles are types of arcs • Angles are in radians (need to calculate
between degrees and radians)
Start angleStart angleStart angleStart angle End angleEnd angleEnd angleEnd angle
![Page 17: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/17.jpg)
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;
![Page 18: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/18.jpg)
TRANSFORMATIONS
![Page 19: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/20.jpg)
TRANSLATE CONTEXT
Context moved.Context moved.The origin point The origin point now has a new now has a new
location.location.
Context moved.Context moved.The origin point The origin point now has a new now has a new
location.location.
![Page 21: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/21.jpg)
TRANSLATE & ROTATE
Translatetranslate(x, y)
Rotaterotate(angle)
![Page 22: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/22.jpg)
THE STATE STACK
State 2Fill Style: blackLine Style: blueScale: 50%
State 1Fill Style: redRotation: 45deg
save()
State 2
State 1
restore()
![Page 23: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/23.jpg)
SAVE & RESTOREctx.fillRect(0,0,150,150); //Draw with default settings ctx.save(); // Save the default state ctx.fillStyle = '#09F'; //Change the fill color ctx.fillRect(15,15,120,120); // Draw with new settingsctx.save(); //Save the current state
ctx.fillStyle = '#FFF'; //Change fill again ctx.fillRect(15,15,120,120); // Draw with new settings
ctx.restore(); //Restore to last saved state ctx.fillRect(45,45,60,60); //Draw with restored settings
state 1state 1
state 2state 2
back to state 2back to state 2
![Page 24: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/24.jpg)
IMAGE
MANIPULATION
![Page 25: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/25.jpg)
DRAW IMAGE
var img = new Image(); //Create an image objectimg.src = 'dog.png'; //Set source img.onload = function(){ //Wait for the image to load
context.drawImage(img,x,y); //Draw image to canvas}
![Page 26: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/26.jpg)
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);
![Page 27: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/27.jpg)
IMAGES AT THE PIXEL LEVELGet image data and loop through pixel by pixel
![Page 28: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/28.jpg)
LOOPING THROUGH PIXELS
c.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}
![Page 29: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/29.jpg)
ANIMATION
![Page 30: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/30.jpg)
ANIMATION
Canvas doesn't track objects on the screen –
You must redraw the stage for each movement
Use event listeners or timers
![Page 31: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/31.jpg)
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
![Page 32: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/32.jpg)
VISUALIZE DATA
USE JSON DATA TO CREATEDYNAMIC DRAWINGS
CONNECT TO A WEB SERVICE(TWITTER, FOURSQUARE, ETC)
![Page 33: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/33.jpg)
BAR CHART
![Page 34: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/34.jpg)
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 it's time to draw!
![Page 35: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/35.jpg)
COOL EXAMPLEEach bubble represents a tweet containing the word "water". Popping the bubble displays the tweet.
![Page 36: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/36.jpg)
GRAPHING LIBRAIRIES
• jQuery VisualizeAwesomeChartJS ... many more
![Page 37: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/37.jpg)
MOBILE TIPS• Javascript touch events instead of mouse
events• PhoneGap Framework to compile to native iOS
and Android apps
![Page 38: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/38.jpg)
CANVASGAMES
![Page 39: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/39.jpg)
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/
![Page 40: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/40.jpg)
CANVAS RIDER
![Page 41: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/41.jpg)
ORBIUM
![Page 42: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/42.jpg)
SIMPLE GAME EXAMPLE
![Page 43: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/43.jpg)
CODING GOBLINS1.Draw images for background, player, and
goblin2.Listen for arrow keys and change player
coordinates accordingly3.Detect hit by comparing monster's
coordinates to player's coordinates4.Redraw as frequently as possible
![Page 44: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/44.jpg)
3D DRAWING
![Page 45: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/45.jpg)
3D IN CANVAS
![Page 46: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/46.jpg)
3D• A few options:• Canvas 3D context• Canvas WebGL context• Simulated 3D in 2D context• Libraries ... three.js, c3dl, k3d, Sylvester
![Page 47: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/47.jpg)
WebGL CONTEXT
var canvas = document.getElementById("glcanvas");// Use standard WebGL context or experimental if it's not available gl = 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!
![Page 48: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/48.jpg)
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
![Page 49: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/49.jpg)
PROCESSING.js
• Reads files from Processing programming environment
• Uses processing-like code in Javascript• More flexibility with objects -- collisions,
mouseover, etc
![Page 50: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/50.jpg)
KINETIC JS
• Dynamically creates a series of canvas elements as "layers"• Provides a Stage class and code similar to Actionscript• Allow easy object moving, dragging, and tracking
![Page 51: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/51.jpg)
LEARNING RESOURCES
BEST LIBRARIESTUTORIALS & TOP EXAMPLES
![Page 52: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/52.jpg)
Q&A
![Page 53: HTML5 Canvas](https://reader038.vdocuments.mx/reader038/viewer/2022102618/55583639d8b42acb078b4861/html5/thumbnails/53.jpg)
THANK YOU!Robyn Overstreet & Jovena Whatmoor