HTML5 Canvas Cheat Sheet v1.

1
Canvas element
Attributes
Name width height Type unsigned long unsigned long Default 300 150

http://blog.nihilogic.dk/

Compositing
Attributes
Name globalAlpha Type float Default 1.0

Methods
Return string Name toDataURL( [Optional] string type, [Variadic] any args) getContext( string contextId)

globalCompositeOperation string source-over Supports any of the following values:

Object

source-over

source-in

source-out

2D Context
Attributes
Name canvas Type HTMLCanvasObject [readonly] source-atop Name save( ) restore( ) destination-out destination-atop lighter destination-over destination-in

Methods
Return void void

Transformation
Methods
Return void void void void Name scale( float x, float y) rotate( float angle) translate( float x, float y) transform( float m11, float m12, float m21, float m22, float dx, float dy) setTransform( float m11, float m12, float m21, float m22, float dx, float dy)

copy

xor

Line styles
Attributes
Name lineWidth Type float Default 1.0

void

lineCap string butt Supports any of the following values: butt round square

Image drawing
Methods
Return void Name lineJoin string miter Supports any of the following values: round bevel miter drawImage( Object image, float dx, float dy, [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, float dx, float dy, float dw, float dh)

miterLimit

float

10

float y2. center] textBaseline string alphabetic Supports any of the following values: [top. float y. float y. float y ) arcTo( float x1. float x. float sw. Paths Methods Return void void void void void void void void Name beginPath( ) closePath( ) fill( ) stroke( ) clip( ) moveTo( float x. float y) quadraticCurveTo( float cpx.org/specs/web-apps/current-work/ (2009-05-04) . float r0. float startAngle.0 0. float radius ) arc( float x. hanging. no-repeat] Methods Return void Name fillText( string text. float x1. float x1. float w. float sh) createImageData( ImageData getImageData( float sx. [Optional] float maxWidth) measureText( string text) void TextMetrics TextMetrics interface width float [readonly] CanvasGradient interface void addColorStop( float offset. float y. float y1.0 transparent black Text Attributes Name font Type string Default 10px sans-serif textAlign string start Supports any of the following values: [start. float y0. float y. string repetition) Argument "image" can be of type HTMLImageElement. float cpy. float x2. float dirtyY. repeat-y. end. float h) strokeRect( float x. string color) Rectangles Methods Return void Name clearRect( float x. right. float y ) bezierCurveTo( float cp1x. float sh) putImageData( ImageData imagedata. bottom] Methods Return CanvasGradient Name createLinearGradient( float x0.whatwg. float endAngle. [Optional] float dirtyX. float r1) CanvasPattern createPattern( Object image. HTMLCanvasElement or HTMLVideoElement "repetition" supports any of the following values: [repeat (default). float cp2x. float dx. float w. float cp1y. boolean anticlockwise ) rect( float x. float dirtyWidth. float w. float x. styles and shadows Attributes Name strokeStyle fillStyle shadowOffsetX shadowOffsetY shadowBlur shadowColor Type any any float float float string Default black black 0. float y1) CanvasGradient createRadialGradient( float x0. float dy. float x. float h) isPointInPath( float x. float y. float dirtyHeight) void void ImageData interface width height data unsigned long unsigned long CanvasPixelArray [readonly] [readonly] [readonly] void CanvasPixelArray interface length unsigned long [readonly] void boolean Source: http://www. float x. [Optional] float maxWidth) strokeText( string text. ideographic. float y1. float w.0 0. float y) void void Pixel manipulation Methods Return ImageData ImageData imagedata) ImageData void Name createImageData( float sw. float cp2y. left. float y. float h) CanvasPattern interface No attributes or methods. float radius. repeat-x. float y0. float y) lineTo( float x. float sy. float y. float h) fillRect( float x. alphabetic.Colors. middle.

Sign up to vote on this title
UsefulNot useful