Sorry about the red box, but we really need you to update your browser. Read this excellent article if you're wondering why we are no longer supporting this browser version. Go to Browse Happy for browser suggestions and how to update.

API Reference

HTML5 2D Canvas Context

The 2D context represents a flat Cartesian surface whose origin
(0,0) is at the top left corner, with the coordinate space
having x values increasing when going right, and y values
increasing when going down.

Functions

Adds points to the subpath such that the arc described by the
circumference of the circle described by the arguments—starting
at the given start angle, ending at the given end angle, and going
in the given direction—is added to the path, connected to the
previous point by a straight line.

Adds a point to the current path, connected to the previous one by
a straight line, then adds a second point to the current path,
connected to the previous one by an arc whose properties are
described by the arguments.

Returns an ImageData object with the given dimensions in CSS pixels
(which might map to a different number of actual device pixels
exposed by the object itself). All the pixels in the returned
object are transparent black.

Returns a CanvasPattern object that uses the given image and
repeats in the direction(s) given by the repetition
argument.

The allowed values for repetition are "repeat" (both directions),
"repeat-x" (horizontal only), "repeat-y" (vertical only), and
"no-repeat" (neither). If the repetition argument is empty or
null, the value repeat is used.

If the first argument is not an img, canvas interface
element, or video element, throws a
TYPE_MISMATCH_ERR exception.

If the image is not fully decoded yet or has no image data,
throws an INVALID_STATE_ERR exception.

If the second argument is not one of the allowed values
a SYNTAX_ERR exception.

The source rectangle is the rectangle whose corners are the four
points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh),
(sx, sy+sh).

The destination rectangle is the rectangle whose corners are
the four points (dx, dy), (dx+dw, dy),
(dx+dw, dy+dh), (dx, dy+dh).

If not specified, the dw and dh arguments must default to
the values of sw and sh, interpreted such that one CSS pixel
in the image is treated as one unit in the canvas
coordinate space. If the sx, sy, sw, and sh arguments are
omitted, they must default to 0, 0, the image's intrinsic
width in image pixels, and the image's intrinsic height
in image pixels, respectively.

Paints the data from the given ImageData object onto the
canvas. If a dirty rectangle is provided, only the pixels
from that rectangle are painted.

The globalAlpha and globalCompositeOperation attributes,
as well as the shadow attributes, are ignored for the
purposes of this method call; pixels in the canvas are
replaced wholesale, with no composition, alpha
blending, no shadows, etc.

Adds the given point to the current path, connected to
the previous one by a quadratic Bézier curve with the
given control point.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Parameters

cpx

x-coord of the intermediate control point describing the curve

cpy

y-coord of the intermediate control point describing the curve

x

x-coord of the end point

y

y-coord of the end point

void
rect
(x : Number, y : Number, w : Number, h : Number)

Adds a new closed subpath to the path, representing the
given rectangle.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Parameters

x

x-coord of the rectangle

y

y-coord of the rectangle

w

width of the rectangle

h

height of the rectangle

void
restore
()

Pop the top entry in the drawing state stack, and reset the drawing
state it describes.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

void
rotate
(angle : Number)

Add the rotation transformation described by the argument to the
transformation matrix. The angle argument represents a clockwise
rotation angle expressed in radians.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Parameters

angle

clockwise rotation angle expressed in radians

void
save
()

Push a copy of the current drawing state onto the drawing state stack.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

void
scale
(x : Number, y : Number)

Add the scaling transformation described by the arguments to the
transformation matrix. The x argument represents the scale factor
in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples.

Method must replace the current transformation matrix with the
result of multiplying the current transformation matrix with
the matrix described by:

m11

m21

dx

m12

m22

dy

0

0

1

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Parameters

m11

Is the (1,1) parameter of of the transformation matrix

m12

Is the (1,2) parameter of of the transformation matrix

m21

Is the (2,1) parameter of of the transformation matrix

m22

Is the (2,2) parameter of of the transformation matrix

dx

Is the x-scalar of the transformation matrix

dy

Is the y-scalar of the transformation matrix

void
translate
(x : Number, y : Number)

Add the translation transformation described by the arguments to
the transformation matrix. The x argument represents the translation
distance in the horizontal direction and the y argument represents
the translation distance in the vertical direction. The arguments
are in coordinate space units.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Parameters

x

x-coord of the translation

y

y-coord of the translation

Properties

Object
fillStyle

The current style used for filling shapes.
Can be set, to change the fill style.
The style can be either a string containing a CSS color, or a
CanvasGradient or CanvasPattern object.
Invalid values are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
font

The current font settings.
Can be set, to change the font. The syntax is the same as
for the CSS 'font' property; values that cannot be parsed
as CSS font values are ignored.
Relative keywords and lengths are computed relative to the
font of the canvas interface element.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
globalAlpha

The current alpha value applied to rendering operations.
Can be set, to change the alpha value. Values outside of the range
from 0.0 to 1.0 are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
globalCompositeOperation

The current composition operation, from the list below.
Can be set, to change the composition operation. Unknown values
are ignored.

"copy":
A (B is ignored). Display the source image instead of the
destination image.

"lighter":
A plus B. Display the sum of the source image and destination
image, with color values approaching 1 as a limit.

"source-atop":
A atop B. Display the source image wherever both images are opaque.
Display the destination image wherever the destination image is
opaque but the source image is transparent. Display transparency
elsewhere.

"source-in":
A in B. Display the source image wherever both the source image
and destination image are opaque. Display transparency elsewhere.

"source-out":
A out B. Display the source image wherever the source image is
opaque and the destination image is transparent. Display
transparency elsewhere.

"source-over" (default):
A over B. Display the source image wherever the source image is
opaque. Display the destination image elsewhere.

"vendorName-operationName":
Vendor-specific extensions to the list of composition operators
should use this syntax.

"xor":
A xor B. Exclusive OR of the source image and destination image.

These values are all case-sensitive and must be used exactly as
shown. User agents must not recognize values that are not a
case-sensitive match for one of the values given above.

The operators in the previous list must be treated as described
by the Porter-Duff operator given at the start of their
description (e.g. A over B).

On setting, if the user agent does not recognize the
specified value, the value must be ignored, leaving
the value of globalCompositeOperation unaffected.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
lineCap

The current line cap style.
Can be set, to change the line cap style.
The possible line cap styles are "butt", "round", and "square".
Other values are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
lineJoin

Returns the current line join style.
Can be set, to change the line join style.
The possible line join styles are "miter", "round", and "bevel".
Other values are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
lineWidth

The current line width.
Can be set, to change the line width.
Values that are not finite values greater than zero are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
miterLimit

The current miter limit ratio.
Can be set, to change the miter limit ratio.
Values that are not finite values greater than zero are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
shadowBlur

The current level of blur applied to shadows.
Can be set, to change the blur level. Values that are not finite
numbers greater than or equal to zero are ignored.

The units do not map to coordinate space units and are
not affected by the current transformation matrix.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
shadowColor

Returns the current shadow color.
Can be set, to change the shadow color. Values that cannot be
parsed as CSS colors are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
shadowOffsetX

The current shadow offset.
Can be set, to change the shadow offset. Values that are not
finite numbers are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Number
shadowOffsetY

The current shadow offset.
Can be set, to change the shadow offset. Values that are not
finite numbers are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

Object
strokeStyle

The current style used for the stroke of the shapes.
Can be set, to change the stroke style.
The style can be either a string containing a CSS color, or a
CanvasGradient or CanvasPattern object.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
textAlign

The current text alignment settings.
Can be set, to change the alignment. The possible values are
"start", "end", "left", "right", and "center". The default
is "start".
Other values are ignored.

Supported Platforms

- BlackBerry OS 6.0+

- BlackBerry PlayBook 1.0+

- BlackBerry 10

- Ripple Emulator

String
textBaseline

The current baseline alignment settings.
Can be set, to change the baseline alignment. The possible
values are "top", "hanging", "middle", "alphabetic", "ideographic",
and "bottom". The default is "alphabetic". Other values are
ignored.