HTML5 Canvas
The HTML5 canvas element provides a container for JavaScript to draw graphics on a web page. It is a resolution dependent rectangular area with per-pixel control.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Any text inside the between <canvas> tags will be displayed in browsers that do not support the canvas element.
Supported Platform(s)
- BlackBerry OS 6.0+ |
- BlackBerry PlayBook 1.0+ |
- Ripple Emulator |
API | BB5.0 | BB6.0 | BB7.0 | PB1.0 | PB2.0 | BB10 | Ripple |
---|---|---|---|---|---|---|---|
canvas.getContext | Y | Y | Y | Y | Y | ||
canvas.toDataURL | Y | Y | Y | Y | Y | ||
height | Y | Y | Y | Y | Y | ||
width | Y | Y | Y | Y | Y |
Configuration Document Settings
To use all of the API described for this object, you must ensure the following settings are in your configuration document: |
This API does not require a <feature> element to be declared in the configuration document of your BlackBerry WebWorks Application. |
Permission Elements (PlayBook and BlackBerry 10+) |
---|
This API does not require a <permission> element to be declared in the configuration document of your BlackBerry WebWorks Application. |
Functions
static
Object
canvas.getContext
(contextId : String)
Returns an object that exposes an API for drawing on the canvas.
Supported Platforms | |
---|---|
- BlackBerry OS 6.0+ | |
- BlackBerry PlayBook 1.0+ | |
- Ripple Emulator |
Parameters | |
---|---|
contextId |
Specifies the desired API. List of defined contexts: 2d, experimental-webgl. |
Return:
Returns an object for contextId. Returns null if the given context ID is not supported or if the canvas has already been initialised with some other (incompatible) context type (e.g. trying to get a "2d" context after getting a "experimental-webgl" context).
Code Example:
|
static
String
canvas.toDataURL
([type : String])
Returns a data:URL for the image in the canvas.
Supported Platforms | |
---|---|
- BlackBerry OS 6.0+ | |
- BlackBerry PlayBook 1.0+ | |
- Ripple Emulator |
Parameters | |
---|---|
type | The argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given type isn't supported. |
Return:
When called with no arguments, returns a data:URL containing a representation of the image as a PNG file. If the canvas has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then the method must return the string "data:,". When the method is called with one arguments, it must return a data:URL containing a representation of the image in the format given by type. The possible values are MIME types with no parameters, for example image/png, image/jpeg, or even maybe image/svg+xml if the implementation actually keeps enough information to reliably render an SVG image from the canvas.
Code Example:
|
|
Properties
static
pixels
height
Specifies the height of the canvas.
The default value of height is 150 pixels. Whenever the height or width of a canvas is re-set the canvas content will be cleared. Syntax : <canvas height="value">Supported Platforms | |
---|---|
- BlackBerry OS 6.0+ | |
- BlackBerry PlayBook 1.0+ | |
- Ripple Emulator |
Code Example:
|
static
pixels
width
Specifies the width of the canvas.
The default value of width is 300 pixels. Whenever the height or width of a canvas is re-set the canvas content will be cleared. Syntax : <canvas width="value">Supported Platforms | |
---|---|
- BlackBerry OS 6.0+ | |
- BlackBerry PlayBook 1.0+ | |
- Ripple Emulator |