HTML5 Canvas Cheat Sheet v1.1 http://blog.nihilogic.dk/
Canvas element Compositing
Attributes Attributes
Name Type Default Name Type Default
width unsigned long 300 globalAlpha float 1.0
height unsigned long 150 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)
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,
HTMLCanvasElement or HTMLVideoElement
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)
Argument "image" can be of type HTMLImageElement,
HTMLCanvasElement or HTMLVideoElement TextMetrics interface
"repetition" supports any of the following values:
width float [readonly]
[repeat (default), repeat-x, repeat-y, no-repeat]
CanvasGradient interface Rectangles
void addColorStop(
float offset, string color)
Methods
Return Name
CanvasPattern interface
void clearRect(
No attributes or methods. float x, float y, float w, float h)
void fillRect(
Paths float x, float y, float w, float h)
void strokeRect(
Methods float x, float y, float w, float h)
Return Name
void beginPath( ) Pixel manipulation
void closePath( )
void fill( )
Methods
void stroke( ) Return Name
void clip( ) ImageData createImageData( float sw, float sh)
void moveTo( float x, float y) ImageData createImageData( ImageData
void lineTo( float x, float y) imagedata)
void quadraticCurveTo( ImageData getImageData(
float cpx, float cpy, float sx, float sy, float sw, float sh)
float x, float y ) void putImageData(
void bezierCurveTo( ImageData imagedata,
float cp1x, float cp1y, float dx, float dy,
float cp2x, float cp2y, [Optional] float dirtyX, float dirtyY,
float x, float y ) float dirtyWidth, float dirtyHeight)
void arcTo(
float x1, float y1, ImageData interface
float x2, float y2, float radius ) width unsigned long [readonly]
void arc( height unsigned long [readonly]
float x, float y, float radius,
data CanvasPixelArray [readonly]
float startAngle, float endAngle,
boolean anticlockwise ) CanvasPixelArray interface
void rect( float x, float y, float w, float h)
length unsigned long [readonly]
boolean isPointInPath( float x, float y)
Source: http://www.whatwg.org/specs/web-apps/current-work/ (2009-05-04)