Introduction to Canvas - Toronto HTML5 User Group

On the Menu…
1. Introducing HTML5 Canvas
2. Drawing on the Canvas
3. Simple Compositing
4. Canvas Transformations
5. Sprite Animations
6. Rocket Science

Understanding HTML5 Canvas
Immediate Mode
Canvas is an IMMEDIATE MODE bitmapped area of browser screen that can
be manipulated by you through JavaScript.
› Canvas completely redraws bitmapped screen on every frame using Canvas API
› Flash, Silverlight, SVG use retained mode

2D Context
The Canvas API includes a 2D context allowing you to draw shapes, render
text, 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

Understanding HTML5 Canvas
Canvas Effects
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

Browser Support
Dummy Canvas Creation – by Mark Pilgrim (http://diveintohtml5.org)
function canvasSupport () {
return !!document.createElement('testcanvas').getContext;
}

function canvasApp() {
if (!canvasSupport) {
return;
}
}

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

Text
› fillText( message, posX, posY)
› strokeStyle

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

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

Arcs 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

Clipping
Clipping allows masking of Canvas areas so anything drawn only appears in
clipped 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

Compositing
Compositing is the control of transparency and layering of objects. This is
controlled 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

Canvas Rotations
Reference:
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.

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);

Images on Canvas
Reference:
Canvas Image API can load in image data and apply directly to canvas
Image 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);

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

› 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

› 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);

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

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.

Introduction to Canvas - Toronto HTML5 User Group

Recommended

More Related Content

Similar to Introduction to Canvas - Toronto HTML5 User Group (20)

Recently uploaded (20)

Introduction to Canvas - Toronto HTML5 User Group

Editor's Notes