JavaScript Reference

Local Navigation

Canvas 2D rendering context API

Object

Description

Availability

CanvasGradient

Represents a linear or radial gradient definition that is used for fills and strokes.

6.0or later

CanvasPattern

Represents an image that is used as a repeatable pattern for fills and strokes.

6.0 or later

CanvasPixelArray

Provides access to the raw pixel data for the canvas image.

6.0 or later

CanvasRenderingContext2D

Defines the context in which drawing and animation occurs. It represents a flat, rectangular two-dimensional surface that is placed upon the canvas defined by the associated <canvas> element.

6.0 or later

ImageData

Contains information about the image on a canvas.

6.0 or later

TextMetrics

Returns the width of a block of text.

6.0 or later

Object: CanvasGradient

Availability

BlackBerry Device Software 6.0 or later

The CanvasGradient object represents a linear or radial gradient definition that is used for fills and strokes. CanvasGradient objects are created using CanvasRenderingContext2D.createLinearGradient() or CanvasRenderingContext2D.createRadialGradient().

Back To Top

CanvasGradient methods

Method name

Description

Support level

Availability

addColorStop()

Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.

HTML 5

6.0 or later

Back To Top

Object: CanvasPattern

Availability

BlackBerry Device Software 6.0 or later

The CanvasPattern object represents an image that is used as a repeatable pattern for fills and strokes. CanvasPattern objects are created using CanvasRenderingContext2D.createPattern().

Back To Top

Object: CanvasPixelArray

Availability

BlackBerry Device Software 6.0 or later

The CanvasPixelArray object can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order). Each color component is represented by an integer between 0 and 255. Each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array.

Back To Top

CanvasPixelArray properties

Property name

Type

Description

Status

Support level

Availability

length

int

Returns the number of pixels in the canvas.

read only

HTML 5

6.0 or later

Back To Top

Object: CanvasRenderingContext2D

Availability

BlackBerry Device Software 6.0 or later

The CanvasRenderingContext2D object defines the context in which drawing and animation occurs. It represents a flat, rectangular two-dimensional surface that is placed upon the canvas defined by the associated <canvas> element. The canvas attribute defined for the context associates the context with an existing <canvas> element.

Back To Top

CanvasRenderingContext2D methods

Method name

Description

Support level

Availability

arc()

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 and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line.

HTML 5

6.0 or later

arcTo()

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.

HTML 5

6.0 or later

beginPath()

Resets the current path.

HTML 5

6.0 or later

bezierCurveTo()

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

HTML 5

6.0 or later

clearRect()

Clears all pixels on the canvas in the given rectangle to transparent black.

HTML 5

6.0 or later

clip()

Further constrains the clipping region to the given path.

HTML 5

6.0 or later

closePath()

Closes an open subpath by connecting the last point of the subpath with the first.

HTML 5

6.0 or later

createImageData()

Returns an ImageData object. All the pixels in the returned object are transparent black.

HTML 5

6.0 or later

createLinearGradient()

Returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments.

HTML 5

6.0 or later

createPattern()

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

HTML 5

6.0 or later

createRadialGradient()

Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments.

HTML 5

6.0 or later

drawImage()

Draws the given image onto the canvas.

HTML 5

6.0 or later

fill()

Fills the subpaths with the current fill style.

HTML 5

6.0 or later

fillRect()

Paints the given rectangle onto the canvas, using the current fill style.

HTML 5

6.0 or later

fillText()

Fills the given text at the given position.

HTML 5

6.0 or later

getImageData()

Returns an ImageData object containing the image data for the given rectangle of the canvas.

HTML 5

6.0 or later

isPointInPath()

Returns true if the given point is in the current path.

HTML 5

6.0 or later

lineTo()

Adds the given point to the current subpath, connected to the previous one by a straight line.

HTML 5

6.0 or later

measureText()

Returns a TextMetrics object with the metrics of the given text in the current font.

HTML 5

6.0 or later

moveTo()

Creates a new subpath with the given point.

HTML 5

6.0 or later

putImageData()

Paints the data from the given ImageData object onto the canvas.

HTML 5

6.0 or later

quadraticCurveTo()

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

HTML 5

6.0 or later

rect()

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

HTML 5

6.0 or later

restore()

Returns the most recently saved context to the top of the drawing stack.

HTML 5

6.0 or later

rotate()

Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.

HTML 5

6.0 or later

save()

Pushes the context to the top of the drawing stack.

HTML 5

6.0 or later

scale()

Changes the transformation matrix to apply a scaling transformation with the given characteristics.

HTML 5

6.0 or later

setTransform()

Sets the transformation matrix to the matrix specified by the arguments.

HTML 5

6.0 or later

stroke()

Strokes the subpaths with the current stroke style.

HTML 5

6.0 or later

strokeRect()

Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.

HTML 5

6.0 or later

strokeText()

Strokes the given text at the given position.

HTML 5

6.0 or later

transform()

Changes the transformation matrix to apply the matrix specified by the arguments.

HTML 5

6.0 or later

translate()

Changes the transformation matrix to apply a translation transformation with the given characteristics.

HTML 5

6.0 or later

Back To Top

Properties

Property name

Type

Description

Status

Support level

Availability

canvas

HTMLCanvasElement

Returns the <canvas> HTML element on which the context is rendered.

read only

HTML 5

6.0 or later

fillStyle

DOMObject

Specifies the fill style used for filling closed shapes.

writable

HTML 5

6.0 or later

font

DOMString

Specifies the font used for any text content.

writable

HTML 5

6.0 or later

globalAlphaCompositeOperation

float

Specifies the alpha value applied to rendering operations.

writable

HTML 5

6.0 or later

globalCompositingOperationCompositeOperation

DOMDOMString

Specifies the composition operation.

writable

HTML 5

6.0 or later

lineCap

DOMDOMString

Specifies the shape to be used at the end of an open sub-path.

writable

HTML 5

6.0 or later

lineJoin

DOMDOMString

Specifies the shape to be used at the corners of paths or shapes.

writable

HTML 5

6.0 or later

lineWidth

float

Specifies the width of the stroke, in co-ordinate space units.

writable

HTML 5

6.0 or later

miterLimit

float

Specifies the maximum ratio of stroke width to miter length (the distance from the inner edge of the corner to the outer edge). If a mitered corner would result in the ratio exceeding the miterLimit value, then the corner is converted to a bevel.

writable

HTML 5

6.0 or later

shadowBlur

float

Specifies the level of blur applied to shadows

writable

HTML 5

6.0 or later

shadowColor

DOMString

Specifies the shadow color.

writable

HTML 5

6.0 or later

shadowOffsetX

float

Specifies the horizontal offset of the shadow.

writable

HTML 5

6.0 or later

shadowOffsetY

float

Specifies the vertical offset of the shadow.

writable

HTML 5

6.0 or later

strokeStyle

DOMObject

Specifies the stroke style used for paths and shape outlines.

writable

HTML 5

6.0 or later

textAlign

DOMString

Specifies the text alignment settings.

writable

HTML 5

6.0 or later

textBaseline

DOMString

Specifies the baseline alignment settings.

writable

HTML 5

6.0 or later

Back To Top

Object: ImageData

Availability

BlackBerry Device Software 6.0 or later

The ImageData object contains information about the image on a canvas.

Back To Top

Properties

Property name

Type

Description

Status

Support level

Availability

data

CanvasPixelArray

Specifies a CanvasPixelArray object holding the image data.

read only

HTML 5

6.0 or later

height

int

Specifies the number of rows in the image data.

writable

HTML 5

6.0 or later

width

int

Specifies the number of physical device pixels per row in the image data.

writable

HTML 5

6.0 or later

Back To Top

Object: TextMetrics

Availability

BlackBerry Device Software 6.0 or later

The TextMetrics object is returned by CanvasRenderingContext2D.measureText(). It has a single attribute, width, which returns the width of a block of text.

Back To Top

Properties

Property name

Type

Description

Status

Support level

Availability

width

float

Returns the width of a block of text, in pixels.

read only

HTML 5

6.0 or later

Back To Top
Next topic: Core API

Was this information helpful? Send us your comments.