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
View Supported Platform Table
APIBB5.0BB6.0BB7.0PB1.0PB2.0BB10Ripple
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


Properties

pixels height
pixels width

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:
<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  cxt.fillStyle="#FF0000";
  cxt.fillRect(0,0,150,75);
</script>

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:
<script>
  var img1=new Image();
  img1.src="Image1.jpeg";
  var canvas=document.createElement('canvas');
  canvas.width=300;
  canvas.height=300;
  var canvas2d=canvas.getContext("2d");
  canvas2d.drawImage(img1,100,100);
  window.location = canvas.toDataURL("image/png");
</script>
<canvas id=mycanvas width=200 height=200></canvas>
<script>
  var canvas = document.getElementById("mycanvas"); 
  var context = canvas.getContext("2d"); 
  var img = canvas.toDataURL(); 
  document.write('<img src="'+img+'"/>');
</script>

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:
<canvas id="myCanvas" width="200" height="100"></canvas>

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

Documentation generated by JsDoc Toolkit 2.4.0 on Mon Feb 11 2013 14:51:03 GMT-0500 (EST)