HTML5 2D Canvas Context

The 2D context represents a flat Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down.

Supported Platform(s)

- BlackBerry OS 6.0+
- BlackBerry PlayBook
- Ripple Emulator

View Supported Platform Table

APIOS 5.0OS 6.0OS 7.0PlayBookRipple
canvas.getContext('2d')   Y Y YY
arc   Y Y YY
arcTo   Y Y YY
beginPath   Y Y YY
bezierCurveTo   Y Y YY
caretBlinkRate   Y Y Y 
clearRect   Y Y YY
clip   Y Y YY
closePath   Y Y YY
createImageData   Y Y YY
createImageData   Y Y YY
createLinearGradient   Y Y YY
createPattern   Y Y YY
createRadialGradient   Y Y YY
drawFocusRing   Y Y Y 
drawImage   Y Y YY
drawImage   Y Y YY
fill   Y Y YY
fillRect   Y Y YY
fillText   Y Y YY
getImageData   Y Y YY
isPointInPath   Y Y YY
lineTo   Y Y YY
measureText   Y Y YY
moveTo   Y Y YY
putImageData   Y Y YY
quadraticCurveTo   Y Y YY
rect   Y Y YY
restore   Y Y YY
rotate   Y Y YY
save   Y Y YY
scale   Y Y YY
setCaretSelectionRect   Y Y Y 
setTransform   Y Y YY
stroke   Y Y YY
strokeRect   Y Y YY
strokeText   Y Y YY
transform   Y Y YY
translate   Y Y YY
canvas   Y Y YY
fillStyle   Y Y YY
font   Y Y YY
globalAlpha   Y Y YY
globalCompositeOperation   Y Y YY
lineCap   Y Y YY
lineJoin   Y Y YY
lineWidth   Y Y YY
miterLimit   Y Y YY
shadowBlur   Y Y YY
shadowColor   Y Y YY
shadowOffsetX   Y Y YY
shadowOffsetY   Y Y YY
strokeStyle   Y Y YY
textAlign   Y Y YY
textBaseline   Y Y YY

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 Only)
This API does not require a <permission> element to be declared in the configuration document of your BlackBerry WebWorks Application.

canvas.getContext('2d')

canvas.getContext('2d')

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

to create an CanvasRenderingContext2D object you must fetch the context of a Canvas using the '2d' identifier



Code Example(s)

<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function foo()
        {
                var canvas = document.getElementById("myCanvas")
                var context = canvas.getContext('2d');      
                
                // Draw a pink triangle  
                context.beginPath();              
                context.lineWidth="3";
                context.strokeStyle="magenta";
                context.fillStyle="pink";
                context.moveTo(150,0);
                context.lineTo(300,200);
                context.lineTo(0,200);
                context.closePath();
                context.fill();
                context.stroke();
        }
    </script>
    </head>
    <body onload="foo();">
        <canvas id="myCanvas" width="300" height="300"></canvas>
    </body>
</html>

arc

void arc(x : Number, y : Number, radius : Number, startAngle : Number, endAngle : Number, anticlockwise : Boolean)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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

If the given radius is negative, throws an INDEX_SIZE_ERR exception.



Parameter Type Description
x Number x-coord of the start point
y Number y-coord of the start point
radius Number radius of the arc
startAngle Number start angle in radians
endAngle Number end angle in radians
anticlockwise Boolean if true draw the arc anti-clockwise

Throws Description
INDEX_SIZE_ERR If the given radius is negative.

arcTo

void arcTo(x1 : Number, y1 : Number, x2 : Number, y2 : Number, radius : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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.

If the given radius is negative, throws an INDEX_SIZE_ERR exception .



Parameter Type Description
x1 Number x-coord of the start point
y1 Number y-coord of the start point
x2 Number x-coord of the end point
y2 Number y-coord of the end point
radius Number radius of the arc

Throws Description
INDEX_SIZE_ERR If the given radius is negative.

beginPath

void beginPath()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Resets the current path.


bezierCurveTo

void bezierCurveTo(cp1x : Number, cp1y : Number, cp2x : Number, cp2y : Number, x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
cp1x Number x-coord of the first intermediate control point describing the curve
cp1y Number y-coord of the first intermediate control point describing the curve
cp2x Number x-coord of the second intermediate control point describing the curve
cp2y Number y-coord of the second intermediate control point describing the curve
x Number x-coord of the end point
y Number y-coord of the end point

caretBlinkRate

Number caretBlinkRate()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook

Description

Returns the blink rate of the system in milliseconds if supported. Otherwise, returns -1 if it is unsupported by the system.



Returns

blinkrate in milliseconds. -1 if unsupported.

clearRect

void clearRect(x : Number, y : Number, w : Number, h : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
x Number x-coord of the rectangle
y Number y-coord of the rectangle
w Number width of the rectangle
h Number height of the rectangle

clip

void clip()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Further constrains the clipping region to the given path.


closePath

void closePath()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.


createImageData

ImageData createImageData(sw : Number, sh : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Returns an ImageData object with the given dimensions in CSS pixels (which might map to a different number of actual device pixels exposed by the object itself). All the pixels in the returned object are transparent black.



Returns

The ImageData for the current context

Parameter Type Description
sw Number width of the image data object to create
sh Number height of the image data object to create

createImageData

ImageData createImageData(imagedata : ImageData)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Returns an ImageData object with the same dimensions as the argument. All the pixels in the returned object are transparent black.



Returns

The ImageData for the current context

Parameter Type Description
imagedata ImageData The ImageData to copy

Throws Description
NOT_SUPPORTED_ERR If the argument is null

createLinearGradient

CanvasGradient createLinearGradient(x0 : Number, y0 : Number, x1 : Number, y1 : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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

If x0 = x1 and y0 = y1, then the linear gradient will paint nothing.



Returns

The created CanvasGradient

Parameter Type Description
x0 Number x-coord of the start point
y0 Number y-coord of the start point
x1 Number x-coord of the end point
y1 Number y-coord of the end point

Throws Description
NOT_SUPPORTED_ERR If any of the arguments are not finite numbers.

createPattern

CanvasPattern createPattern(image : HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, repetition : String)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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

The allowed values for repetition are "repeat" (both directions), "repeat-x" (horizontal only), "repeat-y" (vertical only), and "no-repeat" (neither). If the repetition argument is empty or null, the value repeat is used.

If the first argument is not an img, canvas interface element, or video element, throws a TYPE_MISMATCH_ERR exception.

If the image is not fully decoded yet or has no image data, throws an INVALID_STATE_ERR exception.

If the second argument is not one of the allowed values a SYNTAX_ERR exception.



Returns

The created CanvasPattern

Parameter Type Description
image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
repetition String

Throws Description
TYPE_MISMATCH_ERR If the first argument isn't an img, canvas, or video element.
INVALID_STATE_ERR If the image has no image data.
SYNTAX_ERR If the second argument isn't one of the allowed values.

createRadialGradient

CanvasGradient createRadialGradient(x0 : Number, y0 : Number, r0 : Number, x1 : Number, y1 : Number, r1 : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Returns

The created CanvasGradient

Parameter Type Description
x0 Number x-coord of the start circle
y0 Number y-coord of the start circle
r0 Number radius of the start circle
x1 Number x-coord of the end circle
y1 Number y-oord of the end circle
r1 Number radius of the end circle

Throws Description
NOT_SUPPORTED_ERR If any of the arguments are not finite numbers.
INDEX_SIZE_ERR If either of the radii are negative.

drawFocusRing

Boolean drawFocusRing(element : Element, [canDrawCustom: Boolean])

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook

Description

If the given element is focused or a descendant of the element with focus, draws a focus ring around the current path, following the platform conventions for focus rings.



Returns

When the method returns true, the author is expected to manually draw a focus ring

Parameter Type Description
element Element check if the given element is focused
canDrawCustom Boolean
Optional 		If true, then the focus ring is only drawn if the user has configured his system to draw focus rings in a particular manner. (For example, high contrast focus rings.)

drawImage

void drawImage(image : HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, sx : Number, sy : Number, sw : Number, sh : Number, dx : Number, dy : Number, dw : Number, dh : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Draw the given image onto the canvas.

The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

The destination rectangle is the rectangle whose corners are the four points (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel in the image is treated as one unit in the canvas coordinate space. If the sx, sy, sw, and sh arguments are omitted, they must default to 0, 0, the image's intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.



Parameter Type Description
image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement the source image
sx Number x-coord of the source position
sy Number y-coord of the source position
sw Number width of the source position
sh Number height of the source position
dx Number x-coord of the destination position
dy Number y-coord of the destination position
dw Number width of the destination position
dh Number height of the destination position

drawImage

void drawImage(image : HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, dx : Number, dy : Number, [dw: Number], [dh: Number])

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Draw the given image onto the canvas.



Parameter Type Description
image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement the source image
dx Number x-coord of the destination position
dy Number y-coord of the destination position
dw Number
Optional 		width of the destination position
dh Number
Optional 		height of the destination position

fill

void fill()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Fills the subpaths with the current fill style.


fillRect

void fillRect(x : Number, y : Number, w : Number, h : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
x Number x-coord of the rectangle
y Number y-coord of the rectangle
w Number width of the rectangle
h Number height of the rectangle

fillText

void fillText(text : String, x : Number, y : Number, [maxWidth: Number])

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Renders fill for the given text at the given position. If a maximum width is provided, the text is scaled to fit that width if necessary.



Parameter Type Description
text String the text to fill
x Number the x-coord of where the text is placed
y Number the y-coord of where the text is placed
maxWidth Number
Optional 		The maximum width the text should take up

getImageData

ImageData getImageData(sx : Number, sy : Number, sw : Number, sh : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Returns

The ImageData

Parameter Type Description
sx Number x-coord of the source position
sy Number y-coord of the source position
sw Number width of the source position
sh Number height of the source position

Throws Description
INDEX_SIZE_ERR If the either of the width or height arguments are zero.
NOT_SUPPORTED_ERR If the argument is null

isPointInPath

Boolean isPointInPath(x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Returns

true if point x,y is in the path, otherwise false

Parameter Type Description
x Number x-coord of the point to check
y Number y-coord of the point to check

lineTo

void lineTo(x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
x Number x-coord of the end point to draw a line to
y Number y-coord of the end point to draw a line to

measureText

TextMetrics measureText(text : String)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Returns

the width of the text if rendered

Parameter Type Description
text String the text string to measure

moveTo

void moveTo(x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Creates a new subpath with the given point as its first (and only) point.



Parameter Type Description
x Number x-coord of the point to move to
y Number y-coord of the point to move to

putImageData

void putImageData(imagedata : ImageData, dx : Number, dy : Number, [dirtyX: Number], [dirtyY: Number], [dirtyWith: Number], [dirtyHeight: Number])

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Paints the data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted.

The globalAlpha and globalCompositeOperation attributes, as well as the shadow attributes, are ignored for the purposes of this method call; pixels in the canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc.



Parameter Type Description
imagedata ImageData The ImageData to copy
dx Number x-coord of the destination position
dy Number y-coord of the destination position
dirtyX Number
Optional 		x-coord of the source position
dirtyY Number
Optional 		y-coord of the source position
dirtyWith Number
Optional 		width of the source position
dirtyHeight Number
Optional 		height of the source position

Throws Description
TYPE_MISMATCH_ERR If the first argument is null
NOT_SUPPORTED_ERR If any of the other arguments are not finite.

quadraticCurveTo

void quadraticCurveTo(cpx : Number, cpy : Number, x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
cpx Number x-coord of the intermediate control point describing the curve
cpy Number y-coord of the intermediate control point describing the curve
x Number x-coord of the end point
y Number y-coord of the end point

rect

void rect(x : Number, y : Number, w : Number, h : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
x Number x-coord of the rectangle
y Number y-coord of the rectangle
w Number width of the rectangle
h Number height of the rectangle

restore

void restore()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Pop the top entry in the drawing state stack, and reset the drawing state it describes.


rotate

void rotate(angle : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Add the rotation transformation described by the argument to the transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.



Parameter Type Description
angle Number clockwise rotation angle expressed in radians

save

void save()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Push a copy of the current drawing state onto the drawing state stack.


scale

void scale(x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Add the scaling transformation described by the arguments to the transformation matrix. The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples.



Parameter Type Description
x Number the amount to scale horizontally
y Number the amount to scale vertically

setCaretSelectionRect

Boolean setCaretSelectionRect(element : Element, x : Number, y : Number, w : Number, h : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook

Description

Returns true if the given element is focused or a document descendant of an element with focus. Otherwise, returns false.



Returns

true if the given element is focused or a document descendant of an element with focus. Otherwise, returns false

Parameter Type Description
element Element
x Number x-coord of the selection position
y Number y-coord of the selection position
w Number width of the selection position
h Number height of the selection position

setTransform

void setTransform(m11 : Number, m12 : Number, m21 : Number, m22 : Number, dx : Number, dy : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Reset the current transform to the identity matrix (it should not change the image). To transform the image, invoke the transform(m11, m12, m21, m22, dx, dy) method with the appropriate arguments.



Parameter Type Description
m11 Number Is the (1,1) parameter of of the transformation matrix
m12 Number Is the (1,2) parameter of of the transformation matrix
m21 Number Is the (2,1) parameter of of the transformation matrix
m22 Number Is the (2,2) parameter of of the transformation matrix
dx Number Is the x-scalar of the transformation matrix
dy Number Is the y-scalar of the transformation matrix

stroke

void stroke()

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Creates the strokes of the subpaths with the current stroke style.


strokeRect

void strokeRect(x : Number, y : Number, w : Number, h : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

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



Parameter Type Description
x Number x-coord of the rectangle
y Number y-coord of the rectangle
w Number width of the rectangle
h Number height of the rectangle

strokeText

void strokeText(text : String, x : Number, y : Number, [maxWidth: Number])

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Renders strokes for the given text at the given position. If a maximum width is provided, the text is scaled to fit that width if necessary.



Parameter Type Description
text String
x Number the x-coord of where the text is placed
y Number the y-coord of where the text is placed
maxWidth Number
Optional 		The maximum width the text should take up

transform

void transform(m11 : Number, m12 : Number, m21 : Number, m22 : Number, dx : Number, dy : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Method must replace the current transformation matrix with the result of multiplying the current transformation matrix with the matrix described by:

m11m21dx
m12m22dy
001



Parameter Type Description
m11 Number Is the (1,1) parameter of of the transformation matrix
m12 Number Is the (1,2) parameter of of the transformation matrix
m21 Number Is the (2,1) parameter of of the transformation matrix
m22 Number Is the (2,2) parameter of of the transformation matrix
dx Number Is the x-scalar of the transformation matrix
dy Number Is the y-scalar of the transformation matrix

translate

void translate(x : Number, y : Number)

Supported Platform(s)

 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator

Description

Add the translation transformation described by the arguments to the transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction. The arguments are in coordinate space units.



Parameter Type Description
x Number x-coord of the translation
y Number y-coord of the translation

Properties:

Property Type Description Supported Platform(s)
canvas canvas
readonly 		Return the canvas interface element that the context paints on.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
fillStyle Object The current style used for filling shapes.
Can be set, to change the fill style.
The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object. Invalid values are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
font String The current font settings.
Can be set, to change the font. The syntax is the same as for the CSS 'font' property; values that cannot be parsed as CSS font values are ignored.
Relative keywords and lengths are computed relative to the font of the canvas interface element.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
globalAlpha Number The current alpha value applied to rendering operations. Can be set, to change the alpha value. Values outside of the range from 0.0 to 1.0 are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
globalCompositeOperation String The current composition operation, from the list below. Can be set, to change the composition operation. Unknown values are ignored.
  • "copy":
    A (B is ignored). Display the source image instead of the destination image.
  • "destination-atop":
    B atop A. Display the destination image wherever both images are opaque. Display the source image wherever the source image is opaque but the destination image is transparent. Display transparency elsewhere.
  • "destination-in":
    B in A. Display the destination image wherever both the destination image and source image are opaque. Display transparency elsewhere.
  • "destination-out":
    B out A. Display the destination image wherever the destination image is opaque and the source image is transparent. Display transparency elsewhere.
  • "destination-over":
    B over A. Display the destination image wherever the destination image is opaque. Display the source image elsewhere.
  • "lighter":
    A plus B. Display the sum of the source image and destination image, with color values approaching 1 as a limit.
  • "source-atop":
    A atop B. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.
  • "source-in":
    A in B. Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.
  • "source-out":
    A out B. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.
  • "source-over" (default):
    A over B. Display the source image wherever the source image is opaque. Display the destination image elsewhere.
  • "vendorName-operationName":
    Vendor-specific extensions to the list of composition operators should use this syntax.
  • "xor":
    A xor B. Exclusive OR of the source image and destination image.


These values are all case-sensitive and must be used exactly as shown. User agents must not recognize values that are not a case-sensitive match for one of the values given above.

The operators in the previous list must be treated as described by the Porter-Duff operator given at the start of their description (e.g. A over B).

On setting, if the user agent does not recognize the specified value, the value must be ignored, leaving the value of globalCompositeOperation unaffected.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
lineCap String The current line cap style.
Can be set, to change the line cap style.
The possible line cap styles are "butt", "round", and "square".
Other values are ignored.

  - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
lineJoin String Returns the current line join style.
Can be set, to change the line join style.
The possible line join styles are "miter", "round", and "bevel".
Other values are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
lineWidth Number The current line width.
Can be set, to change the line width.
Values that are not finite values greater than zero are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
miterLimit Number The current miter limit ratio.
Can be set, to change the miter limit ratio.
Values that are not finite values greater than zero are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
shadowBlur Number The current level of blur applied to shadows.
Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.

The units do not map to coordinate space units and are not affected by the current transformation matrix.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
shadowColor String Returns the current shadow color.
Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
shadowOffsetX Number The current shadow offset.
Can be set, to change the shadow offset. Values that are not finite numbers are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
shadowOffsetY Number The current shadow offset.
Can be set, to change the shadow offset. Values that are not finite numbers are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
strokeStyle Object The current style used for the stroke of the shapes.
Can be set, to change the stroke style.
The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
textAlign String The current text alignment settings.
Can be set, to change the alignment. The possible values are "start", "end", "left", "right", and "center". The default is "start".
Other values are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
textBaseline String The current baseline alignment settings.
Can be set, to change the baseline alignment. The possible values are "top", "hanging", "middle", "alphabetic", "ideographic", and "bottom". The default is "alphabetic". Other values are ignored.
 - BlackBerry OS 6.0+
 - BlackBerry PlayBook
 - Ripple Emulator
Documentation generated by JsDoc Toolkit 2.4.0 on Sun Dec 30 2012 13:31:16 GMT-0500 (EST)