Introduction to Canvas - Toronto HTML5 User Group


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

Introduction to Canvas - Toronto HTML5 User Group

  1. 1. HTML5 Canvas Exploring
  2. 2. On the Menu…1. Introducing HTML5 Canvas2. Drawing on the Canvas3. Simple Compositing4. Canvas Transformations5. Sprite Animations6. Rocket Science
  3. 3. Understanding HTML5 CanvasImmediate ModeCanvas is an IMMEDIATE MODE bitmapped area of browser screen that canbe manipulated by you through JavaScript. › Canvas completely redraws bitmapped screen on every frame using Canvas API › Flash, Silverlight, SVG use retained mode2D ContextThe Canvas API includes a 2D context allowing you to draw shapes, rendertext, and display images onto the defined area of browser screen. › The 2D context is a display API used to render the Canvas graphics › The JavaScript applied to this API allows for keyboard and mouse inputs, timer intervals, events, objects, classes, sounds… etc
  4. 4. Understanding HTML5 CanvasCanvas EffectsTransformations are applied to the canvas (with exceptions)Objects can be drawn onto the surface discretely, but once on the canvas,they are a single collection of pixels in a single spaceResult: There is then only one object on the Canvas: the contextThe DOM cannot access individual graphical elements created on CanvasBrowser SupportDummy Canvas Creation – by Mark Pilgrim ( canvasSupport () { return !!document.createElement(testcanvas).getContext;}function canvasApp() { if (!canvasSupport) { return; }}
  5. 5. Simple ObjectsBasic objects can be placed on the canvas in three ways:› FillRect(posX, posY, width, height); › Draws a filled rectangle› StrokeRect(posX, posY, width, height); › Draws a rectangle outline› ClearRect(posX, posY, width, height); › Clears the specified area making it fully transparentUtilizing Style functions:› fillStyle › Takes a hexidecimal colour code› strokeStyle › Takes a hexidecimal colour codeText› fillText( message, posX, posY) › Takes a hexidecimal colour code› strokeStyle › Takes a hexidecimal colour code
  6. 6. Simple LinesPaths can be used to draw any shape on Canvas› Paths are simply lists of points for lines to be drawn in-betweenPath drawing› beginPath() › Function call to start a path› moveTo(posX, posY) › Defines a point at position (x, y)› lineTo(posX, posY) › Creates a subpath between current point and position (x, y)› stroke() › Draws the line (stroke) on the path› closePath() › Function call to end a path
  7. 7. Simple LinesUtilizing Style functions:› strokeStyle › Takes a hexadecimal colour code› lineWidth › Defines width of line to be drawn› lineJoin › Bevel, Round, Miter (default – edge drawn at the join)› lineCap › Butt, Round, SquareArcs and curves can be drawn on the canvas in four ways An arc can be a circle or any part of a circle› arc(posX, posY, radius, startAngle, endAngle, anticlockwise) › Draws a line with given variables (angles are in radians)› arcTo(x1, y1, x2, y2, radius) › Draws a straight line to x1, y1, then an arc to x2, y2 with the radius
  8. 8. ClippingClipping allows masking of Canvas areas so anything drawn only appears inclipped areas› Save() and Restore() › Drawing on the Canvas makes use of a stack of drawing “states” › A state stores Canvas data of elements drawn › Transformations and clipping regions use data stored in states › Save() › Pushes the current state to the stack › Restore() › Restores the last state saved from the stack to the Canvas › Note: current paths and current bitmaps are not part of saved states
  9. 9. CompositingCompositing is the control of transparency and layering of objects. This iscontrolled by globalAlpha and globalCompositeOperation› globalAlpha › Defaults to 1 (completely opaque) › Set before an object is drawn to Canvas› globalCompositeOperation › copy › Where overlap, display source › destination-atop › Where overlap, display destination over source, transparent elsewhere › destination-in › Where overlap, show destination in the source, transparent elsewhere › destination-out › Where overlap, show destination if opaque and source transparent, transparent elsewhere › destination-over › Where overlap, show destination over source, source elsewhere
  10. 10. Canvas RotationsReference:An object is said to be at 0 angle rotation when it is facing to the left.Rotating the canvas steps:› Set the current Canvas transformation to the “identity” matrix › context.setTransform(1,0,0,1,0,0);› Convert rotation angle to radians: › Canvas uses radians to specify its transformations.› Only objects drawn AFTER context.rotate() are affected › Canvas uses radians to specify its transformations.› In the absence of a defined origin for rotation Transformations are applied to shapes and paths drawn after the setTransform() and rotate() or other transformation function is called.
  11. 11. Canvas RotationsThe point of origin to the center of our shape must be translated to rotate it around its own center› What about rotating about the origin? › Change the origin of the canvas to be the centre of the square › context.translate(x+.5*width, y+.5*height); › Draw the object starting with the correct upper-left coordinates › context.fillRect(-.5*width,-.5*height , width, height);
  12. 12. Images on CanvasReference:Canvas Image API can load in image data and apply directly to canvasImage data can be cut and sized to desired portions› Image object can be defined through HTML › <img src=“zelda.png” id=“zelda”>› Or Javascript › var zelda = new Image(); › zelda.src = “zelda.png”;› Displaying an image › drawImage(image, posX, poxY); › drawImage(image, posX, posY, scaleW, scaleH); › drawImage(image, sourceX, sourceY, sourceW, sourceH, posX, posY, scaleW, scaleH);
  13. 13. HTML Sprite Animation› Creating a Tile Sheet › One method of displaying multiple images in succession for an animation is to use a images in a grid and flip between each “tile” › Create an animation array to hold the tiles › The 2-dimensional array begins at 0 › Store the tile IDs to make Zelda walk and an index to track which tile is displayedvar animationFrames = [0,1,2,3,4]; › Calculate X to give us an integer using the remainder of the current tile divided by the number of tiles in the animationsourceX = integer(current_frame_index modulothe_number_columns_in_the_tilesheet) * tile_width
  14. 14. HTML Sprite Animation› Creating a Tile Sheet › Calculate Y to give us an integer using the result of the current tile divided by the number of tiles in the animation sourceY = integer(current_frame_index divided by columns_in_the_tilesheet) *tile_height› Creating a Timer Loop › A simple loop to call the move function once every 150 milliseconds function startLoop() { var intervalID = setInterval(moveZeldaRight, 150); }› Changing the Image › To change the image being displayed, we have to set the current frame index to the desired tile
  15. 15. HTML Sprite Animation› Changing the Image › Loop through the tiles accesses all frames in the animation and draw each tile with each iteration frameIndex++; if (frameIndex == animationFrames.length) { frameIndex = 0; }› Moving the Image › Set the dx and dy variables during drawing to increase at every iteration context.drawImage(zelda, sourceX, sourceY+60,30,30,x,y,30,30);
  16. 16. Rocket Science› Rocket will rotate when left and right arrows are pressed› Rocket will accelerate when player presses up› Animations are about creating intervals and updating graphics on Canvas for each frame› Transformations to Canvas to allow the rocket to rotate 1. Save current state to stack 2. Transform rocket 3. Restore saved state› Variables in question: › Rotation › Position X › Position Y
  17. 17. Rocket Science› Rocket can face one direction and move in a different direction› Get rotation value based on key presses › Determine X and Y of rocket direction for throttle using Math.cos and Math.sin› Get acceleration value based on up key press › Use acceleration and direction to increase speed in X and Y directions facingX = Math.cos(angleInRadians); movingX = movingX + thrustAcceleration * facingX;› Control the rocket with the keyboard› Respond appropriately with acceleration or rotation per key press.
  18. 18. Thank you!