Canvas consists of 2 parts
<canvas id=”cnvs” width=”150” height=”150”></canvas>
var c = document.getElementById("cnv"); var ctx = c.getContext(“”);
Id: It is not specific, but It is always a good idea to supply an id because this makes it much easier to identify it in a script.
Width: Initial width is 300px
Height: Initial height is 300px
Types of content
<canvas id=”cnvs” width=”600” height=”300”>Your browser doesn’t support canvas!</canvas>
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('webgl');
Canvas supports only 2 primitive shape - rectangles and paths
4 ways to create a rectangle
A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed.
To make shapes using paths:
The x axis of the coordinate
The y axis of the coordinate
The rectangle’s width
The rectangle’s height
Styles & Color
Sets the styles used when filling shapes fillStyle = color
Sets the styles for shapes’ outline strokeStyle = color
Applies the specified transparency value to all future shapes drawn on the canvas. globalAlpha = transparencyValue
Creates and returns a new canvas pattern object. createPattern(image, type)
Control image scaling behavior
ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
Get an image
from the same page:
the document.images collection
the document.getElementsByTagName() method
the ID of the image document.getElementById()
create from scratch
Create new HTMLImageElement objects in our script.
embedding an image via data: url.
using frames from a <video></video>
Draw an image
Scale an image
Slice an image
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
Saves the entire state of the canvas. save()
Restores the most recently saved canvas state. restore()
Moves the canvas and its origin on the grid. translate(x, y)
Rotates the canvas clockwise around the current origin by the angle number of radians. rotate(angle)
Scales the canvas units by x horizontally and by y vertically. scale(x, y)
Multiplies the current transformation matrix with the matrix described by its arguments. transform(a, b, c, d, e, f)
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments. setTransform(a, b, c, d, e, f)
Resets the current transform to the identity matrix. resetTransform()
Compositing & clipping
Basic animation steps
- Clear the canvas
- Save the canvas state
- Draw animated shapes
- Restore the canvas state
Starts repeatedly executing the function specified by function every delay milliseconds. setInterval(function, delay)
Executes the function specified by function in delay milliseconds. setTimeout(function, delay)
Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. requestAnimationFrame(callback)
Hit regions & accessibility
Adds a hit region to the canvas CanvasRenderingContext2D.addHitRegion()
Removes the hit region with the specified id from the canvas. CanvasRenderingContext2D.removeHitRegion()
Removes all hit regions from the canvas. CanvasRenderingContext2D.clearHitRegions()
Pre-render similar primitives or repeating objects on an off-screen canvas
Avoid floating-point coordinates and use integers instead
Don’t scale images in drawImage
Use multiple layered canvases for complex scenes
CSS for large background images
Scaling canvas using CSS transforms
Use the moz-opaque attribute (Gecko only)
Batch canvas calls together
Avoid unnecessary canvas state changes.
Render screen differences only, not the whole new state.
Avoid the shadowBlur property whenever possible.
Avoid text rendering whenever possible.