Canvas 2D rendering context API

JavaScript Reference

Search This Document

Scarica PDF

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().

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

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().

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.

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

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

Object: ImageData

Availability

BlackBerry Device Software 6.0 or later

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

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

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.

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

Next topic: Core API

Previous topic: Method: blackberry.location.setAidMode()

Was this information helpful? Send us your comments.

Global Navigation

JavaScript Reference

Local Navigation