Canvas - HTML5 - page 188

lineTo( x , y )
Create a line path from the current registration point to ( x , y ) .
rect( x , y , width , height )
Create a rectangle path where ( x , y ) is one corner, and the diagonally opposite
corner is ( x+width , y+height ) .
arc( x , y , radius , startAngleRadians , endAngleRadians , antiClockwiseDirection )
Create a circular arc path (up to a full circle), where ( x , y ) is the center of the arc
and the arc starts and ends at the given angles (in radians) and moves in either a
clockwise or counter-clockwise direction.
fill()
Fill in the most recently defined path segment.
stroke()
Stroke (i.e., render, make visible) the most recent path segment.
drawImage(image, ...)
Draw an image into the canvas area.
strokeText( text ,...)
fillText( text ,...)
Add text to the canvas .
clearRect( x , y , width , height )
Clear a rectangular portion of the canvas from ( x , y ) to ( x+width , y+height ) .
strokeStyle=[ string | object ]
fillStyle=[ string | object ]
Set the color/style attributes for strokes or fills, respectively.
Discussion
The canvas API for 2D drawing is standardized in HTML5 (see http://dev.w3.org/html5/
2dcontext/ ). In large part, canvas works the same way across all the modern browsers,
which all now support it. However, be aware that there are some subtle differences
between the browsers' implementations.
Because these quirks in behavior between different browsers/versions
are generally outside the specification and are more implementation-
specific, detailing or predicting them is futile.
As such, we do not cover those quirks in depth; instead, the reader is
implored to carefully test the usage of canvas and its API in all relevant
browsers to avoid pitfalls.
The canvas element is specified to have a couple of rendering contexts , which is basically
a fancy way of saying “coordinate systems.” At this time, the only useful (implemented)
rendering context is 2d , which defines a flat, two-dimensional Cartesian coordinate