HTML5 Canvas Cheat Sheet

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	Default
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, floatdx, 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] floatdw, float dh)
Argument image can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement.
void	drawImage(Object image, float sx, float sy, float sw, floatsh, float dx, float dy, float dw, float dh)

Compositing

Attributes

Name	Type	Default
globalAlpha	float	1.0
globalCompositeOperation	string	source-over
Supports any of the following values: source-over source-in source-out source-atop destination-over destination-in destination-out destination-atop lighter copy xor

Line styles

Attributes

Name	Type	Default
lineWidth	float	1.0
lineCap	string	butt
Supports any of the following values: butt round square
lineJoin	string	miter
Supports any of the following values: 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)
image is HTMLImageElement or HTMLCanvasElement. repetition supports any of the following values: repeat (default) repeat-x repeat-y no-repeat

CanvasGradient interface

Return	Name
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, floatcp2y, 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, floatendAngle, 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
Supports any of the following values: start end left right center
textBaseline	string	alphabetic
Supports any of the following values: top hanging middle alphabetic ideographic bottom

Methods

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

TextMetrics interface

Name	Type	Default
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	getImageData(float sx, float sy, float sw, float sh)
void	putImageData(ImageData imagedata, float dx, float dy, [Optional] float dirtyX, float dirtyY, float dirtyWidth, floatdirtyHeight)

ImageData interface

Name	Type	Default
width	unsigned long	[readonly]
height	unsigned long	[readonly]
data	CanvasPixelArray	[readonly]

CanvasPixelArray interface

Name	Type	Default
length	unsigned long	[readonly]