HTML5 Canvas Exploring

On the Menu…

1. Introducing HTML5 Canvas

2. Drawing on the Canvas

3. Simple Compositing

4. Canvas Transformations

5. Colours and Text

6. Simple Animations

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

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)

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

Simple LinesPaths 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 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, 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 waysAn arc can be a circle or any part of a circle

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

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

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.

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

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 canvasImage data can be cut and sized to desired portions

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 animation

sourceX = integer(current_frame_index modulo the_number_columns_in_the_tilesheet) * tile_width

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 millisecondsfunction 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

HTML Sprite Animation

› Changing the Image› Loop through the tiles accesses all frames in the animation and draw

each tile with each iterationframeIndex++;if (frameIndex == animationFrames.length) {

frameIndex = 0;}

› Moving the Image› Set the dx and dy variables during drawing to increase at every

iterationcontext.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 stack2. Transform rocket3. 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

› Control the rocket with the keyboard› Respond appropriately with acceleration or rotation per key

press.

facingX = Math.cos(angleInRadians);movingX = movingX + thrustAcceleration * facingX;

Thank you!