P. 1
HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

|Views: 8|Likes:
Publicado porJosue Mancilla

More info:

Published by: Josue Mancilla on Jul 18, 2011
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





HTML5 Canvas Cheat Sheet v1.

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


Name globalAlpha Type float Default 1.0

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

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





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

Return void void

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)



Line styles
Name lineWidth Type float Default 1.0


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

Image drawing
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)




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

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->