Help Center

Local Navigation

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.

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

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

Next topic: Object: ImageData

Was this information helpful? Send us your comments.