introduction to canvas - toronto html5 user group
TRANSCRIPT
![Page 1: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/1.jpg)
HTML5 Canvas Exploring
![Page 2: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/2.jpg)
On the Menu…
1. Introducing HTML5 Canvas
2. Drawing on the Canvas
3. Simple Compositing
4. Canvas Transformations
5. Sprite Animations
6. Rocket Science
![Page 3: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/3.jpg)
Understanding HTML5 Canvas
Canvas is an IMMEDIATE MODE bitmapped area of browser screen that can be manipulated by you through JavaScript.
Immediate Mode
› Canvas completely redraws bitmapped screen on every frame using Canvas API
› Flash, Silverlight, SVG use retained mode
The Canvas API includes a 2D context allowing you to draw shapes, render text, and display images onto the defined area of browser screen.
2D Context
› 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
![Page 4: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/4.jpg)
Understanding HTML5 Canvas
Transformations 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 space
Result: There is then only one object on the Canvas: the context The DOM cannot access individual graphical elements created on Canvas
Canvas Effects
Browser Support
function canvasSupport () {
return !!document.createElement('testcanvas').getContext;
}
function canvasApp() {
if (!canvasSupport) {
return;
}
}
Dummy Canvas Creation – by Mark Pilgrim (http://diveintohtml5.org)
![Page 5: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/5.jpg)
Simple Objects Basic 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 transparent
Utilizing Style functions: › fillStyle
› Takes a hexidecimal colour code
› strokeStyle › Takes a hexidecimal colour code
Text › fillText( message, posX, posY)
› Takes a hexidecimal colour code
› strokeStyle › Takes a hexidecimal colour code
![Page 6: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/6.jpg)
Simple Lines
Paths can be used to draw any shape on Canvas › Paths are simply lists of points for lines to be drawn in-between
Path 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
![Page 7: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/7.jpg)
Simple Lines Utilizing 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, Square
› 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
Arcs and curves can be drawn on the canvas in four ways An arc can be a circle or any part of a circle
![Page 8: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/8.jpg)
Clipping
› 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
Clipping allows masking of Canvas areas so anything drawn only appears in clipped areas
![Page 9: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/9.jpg)
Compositing
› 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
Compositing is the control of transparency and layering of objects. This is controlled by globalAlpha and globalCompositeOperation
![Page 10: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/10.jpg)
Canvas Rotations
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
Reference: An object is said to be at 0 angle rotation when it is facing to the left.
Transformations are applied to shapes and paths drawn after the setTransform() and rotate() or other transformation function is called.
![Page 11: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/11.jpg)
Canvas Rotations The 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);
![Page 12: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/12.jpg)
Images on Canvas
› 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);
Reference: Canvas Image API can load in image data and apply directly to canvas Image data can be cut and sized to desired portions
![Page 13: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/13.jpg)
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 displayed
var 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 animation
sourceX = integer(current_frame_index modulo
the_number_columns_in_the_tilesheet) * tile_width
![Page 14: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/14.jpg)
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
› 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
sourceY = integer(current_frame_index divided by
columns_in_the_tilesheet) *tile_height
![Page 15: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/15.jpg)
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);
![Page 16: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/17.jpg)
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
› Control the rocket with the keyboard › Respond appropriately with acceleration or rotation
per key press.
facingX = Math.cos(angleInRadians);
movingX = movingX + thrustAcceleration * facingX;
![Page 18: Introduction to Canvas - Toronto HTML5 User Group](https://reader031.vdocuments.mx/reader031/viewer/2022020105/554f3fc1b4c905cd048b5364/html5/thumbnails/18.jpg)
Thank you!