http://blog.nihilogic.dk/

HTML5 Canvas Cheat Sheet v1.x

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, 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

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, 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

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] float maxWidth)
void strokeText(string text, float x, float y, [Optional] float maxWidth)
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, float dirtyHeight)

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]