HTML5 Canvas Cheat Sheet v1.0 http://blog.nihilogic.

dk/

Canvas element Compositing

Attributes Attributes
Name Type Name Type Default
width ulong globalAlpha float 1.0
height ulong globalCompositeOperation
string source-over
Methods
Supports any of the following values:
Return Name
string toDataURL(
[Optional] string type,
[Variadic] any args)
Object getContext( string contextId)
source-over source-in source-out
2D Context
Attributes
Name Type
canvas HTMLCanvasObject [readonly]
source-atop destination-over destination-in
Methods
Return Name
void save( )
void restore( )

Transformation destination-out destination-atop lighter

Methods
Return Name
void scale( float x, float y)
void rotate( float angle)
darker copy xor
void translate( float x, float y)
void transform(
float m11, float m12,
Line styles
float m21, float m22,
Attributes
float dx, float dy)
void setTransform( Name Type Default
float m11, float m12, lineWidth float 1.0
float m21, float m22, lineCap string butt
float dx, float dy) Supports any of the following values:
butt round square
Image drawing
Methods
Return Name
void drawImage( lineJoin string miter
Object image, Supports any of the following values:
float dx, float dy, round bevel miter
[Optional] float dw, float dh)
Argument "image" can be of type HTMLImageElement or
HTMLCanvasElement
void drawImage(
Object image,
float sx, float sy, float sw, float sh miterLimit float 10
float dx, float dy, float dw, float dh)
Colors, styles and shadows Text
Attributes Attributes
Name Type Default Name Type Default
strokeStyle any black font string 10px sans-serif
fillStyle any black textAlign string start
shadowOffsetX float 0.0 Supports any of the following values:
shadowOffsetY float 0.0 [start, end, left, right, center]
shadowBlur float 0.0 textBaseline string alphabetic
Supports any of the following values:
shadowColor string transparent black
[top, hanging, middle, alphabetic, ideographic, bottom]
Methods
Methods
Return Name
Return Name
CanvasGradient createLinearGradient(
void fillText(
float x0, float y0, float x1, float y1)
string text, float x, float y,
CanvasGradient createRadialGradient(
[Optional] float maxWidth)
float x0, float y0, float r0,
void strokeText(
float x1, float y1, float r1)
string text, float x, float y,
CanvasPattern createPattern(
[Optional] float maxWidth)
Object image, string repetition)
TextMetrics measureText( string text)
"image" is HTMLImageElement or HTMLCanvasElement
"repetition" supports any of the following values: TextMetrics interface
[repeat (default), repeat-x, repeat-y, no-repeat]
width float [readonly]
CanvasGradient interface
void addColorStop( Rectangles
float offset, string color)
Methods
CanvasPattern interface
Return Name
No attributes or methods. void clearRect(
float x, float y, float w, float h)
Paths void fillRect(
float x, float y, float w, float h)
Methods void strokeRect(
Return Name float x, float y, float w, float h)
void beginPath( )
void closePath( ) Pixel manipulation
void fill( )
void stroke( )
Methods
void clip( ) Return Name
void moveTo( float x, float y) ImageData createImageData( float sw, float sh)
void lineTo( float x, float y) ImageData getImageData(
void quadraticCurveTo( float sx, float sy, float sw, float sh)
float cpx, float cpy, void putImageData(
float x, float y ) ImageData imagedata,
void bezierCurveTo( float dx, float dy,
float cp1x, float cp1y, [Optional] float dirtyX, float dirtyY,
float cp2x, float cp2y, float dirtyWidth, float dirtyHeight)
float x, float y )
void arcTo( ImageData interface
float x1, float y1, width ulong [readonly]
float x2, float y2, float radius ) height ulong [readonly]
void arc(
data CanvasPixelArray [readonly]
float x, float y, float radius,
float startAngle, float endAngle, CanvasPixelArray interface
boolean anticlockwise )
length ulong [readonly]
void rect( float x, float y, float w, float h)
boolean isPointInPath( float x, float y)

Source: http://www.whatwg.org/specs/web-apps/current-work/