http://blog.nihilogic.dk/

HTML5 Canvas Cheat Sheet v1.1

Canvas element

Attributes

Name Type Default width unsigned long 300 height unsigned long 150

Methods

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

2D Context

Attributes

Name Type canvas HTMLCanvasObject [readonly]

Methods

Return Name void save void restore

Transformation

Methods

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

Image drawing

Methods

Return Name void 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

Compositing

Attributes

Name Type Default globalAlpha float 1.0 globalCompositeOperation
string
source-over

Line styles

Attributes

Name Type Default lineWidth float 1.0 lineCap string butt
butt

round

square

lineJoin string miter
round

bevel

miter

miterLimit float 10

Colors, styles and shadows

Attributes

Name Type Default strokeStyle any black fillStyle any black shadowOffsetX float 0.0 shadowOffsetY float 0.0 shadowBlur float 0.0 shadowColor string transparent black

Methods

Return Name CanvasGradient createLinearGradient float x0, float y0, float x1, float y1 CanvasGradient createRadialGradient float x0, float y0, float r0,
float x1, float y1, float r1 CanvasPattern createPattern Object image, string repetition Argument "image" can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement "repetition" supports any of the following values:
[repeat (default), repeat-x, repeat-y, no-repeat]

CanvasGradient interface

void addColorStop float offset, string color

CanvasPattern interface

No attributes or methods.

Paths

Methods

Return Name void beginPath void closePath void fill void stroke void clip void moveTo float x, float y void lineTo float x, float y void quadraticCurveTo float cpx, float cpy,
float x, float y void bezierCurveTo float cp1x, float cp1y,
float cp2x, float cp2y,
float x, float y void arcTo float x1, float y1,
float x2, float y2, float radius void arc float x, float y, float radius,
float startAngle, float endAngle,
boolean anticlockwise void rect float x, float y, float w, float h boolean isPointInPath float x, float y

Text

Attributes

Name Type Default font string 10px sans-serif textAlign string start
[start, end, left, right, center] textBaseline string alphabetic
[top, hanging, middle, alphabetic, ideographic, bottom]

Methods

Return Name void fillText string text, float x, float y,
[Optional] float maxWidth void strokeText string text, float x, float y,
[Optional] float maxWidth TextMetrics measureText string text

TextMetrics interface

width float [readonly]

Rectangles

Methods

Return Name void clearRect float x, float y, float w, float h void fillRect float x, float y, float w, float h void strokeRect float x, float y, float w, float h

Pixel manipulation

Methods

Return Name ImageData createImageData float sw, float sh ImageData createImageData ImageData imagedata ImageData getImageData float sx, float sy, float sw, float sh void putImageData ImageData imagedata,
float dx, float dy,
[Optional] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight

ImageData interface

width unsigned long [readonly] height unsigned long [readonly] data CanvasPixelArray [readonly]

CanvasPixelArray interface

length unsigned long [readonly]