elemental.html

Interface CanvasRenderingContext2D

All Superinterfaces:

CanvasRenderingContext

All Known Implementing Classes:

JsCanvasRenderingContext2D

public interface CanvasRenderingContext2D
extends CanvasRenderingContext

The bulk of the operations available at present with <canvas> are available through this interface, returned by a call to getContext() on the <canvas> element, with "2d" as its argument.

Method Summary

Modifier and Type	Method and Description
void	arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise) Adds an arc to the path which it center is at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
void	arcTo(float x1, float y1, float x2, float y2, float radius) Adds an arc with the given control points and radius, connected to the previous point by a straight line.
void	beginPath()
void	bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
void	clearRect(float x, float y, float width, float height) Clears the rectangle defined by it starting point at (x, y) and has a w width and a h height.
void	clearShadow()
void	clip()
void	closePath()
ImageData	createImageData(float sw, float sh)
ImageData	createImageData(ImageData imagedata)
CanvasGradient	createLinearGradient(float x0, float y0, float x1, float y1)
CanvasPattern	createPattern(CanvasElement canvas, String repetitionType) Parameters
CanvasPattern	createPattern(ImageElement image, String repetitionType) Parameters
CanvasGradient	createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1)
void	drawImage(CanvasElement canvas, float x, float y) Draws the specified image.
void	drawImage(CanvasElement canvas, float x, float y, float width, float height) Draws the specified image.
void	drawImage(CanvasElement canvas, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) Draws the specified image.
void	drawImage(ImageElement image, float x, float y) Draws the specified image.
void	drawImage(ImageElement image, float x, float y, float width, float height) Draws the specified image.
void	drawImage(ImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) Draws the specified image.
void	drawImage(VideoElement video, float x, float y) Draws the specified image.
void	drawImage(VideoElement video, float x, float y, float width, float height) Draws the specified image.
void	drawImage(VideoElement video, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) Draws the specified image.
void	drawImageFromRect(ImageElement image)
void	drawImageFromRect(ImageElement image, float sx)
void	drawImageFromRect(ImageElement image, float sx, float sy)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh, float dx)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh, float dx, float dy)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)
void	drawImageFromRect(ImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh, String compositeOperation)
void	fill() Fills the subpaths with the current fill style.
void	fillRect(float x, float y, float width, float height) Draws a filled rectangle at (x, y) position whose size is determined by width and height.
void	fillText(String text, float x, float y)
void	fillText(String text, float x, float y, float maxWidth)
Object	getFillStyle() Color or style to use inside shapes.
String	getFont() Default value 10px sans-serif.
float	getGlobalAlpha() Alpha value that is applied to shapes and images before they are composited onto the canvas.
String	getGlobalCompositeOperation() With globalAplpha applied this sets how shapes and images are drawn onto the existing bitmap.
ImageData	getImageData(float sx, float sy, float sw, float sh) Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has a sw width and sh height.
String	getLineCap() Type of endings on the end of lines.
String	getLineJoin() Defines the type of corners where two lines meet.
float	getLineWidth() Width of lines.
float	getMiterLimit() Default 10.
float	getShadowBlur() Specifies the blurring effect.
String	getShadowColor() Color of the shadow.
float	getShadowOffsetX() Horizontal distance the shadow will be offset.
float	getShadowOffsetY() Vertical distance the shadow will be offset.
Object	getStrokeStyle() Color or style to use for the lines around shapes.
String	getTextAlign() Possible values: start (default), end, left, right or center.
String	getTextBaseline()
float	getWebkitBackingStorePixelRatio()
Indexable	getWebkitLineDash() An array which specifies the lengths of alternating dashes and gaps.
float	getWebkitLineDashOffset() Specifies where to start a dasharray on a line.
boolean	isPointInPath(float x, float y) Reports whether or not the specified point is contained in the current path.
boolean	isWebkitImageSmoothingEnabled() Image smoothing mode; if disabled, images will not be smoothed if scaled.
void	lineTo(float x, float y) Connects the last point in the subpath to the x, y coordinates with a straight line.
TextMetrics	measureText(String text)
void	moveTo(float x, float y) Moves the starting point of a new subpath to the (x, y) coordinates.
void	putImageData(ImageData imagedata, float dx, float dy) Compatibility notes
void	putImageData(ImageData imagedata, float dx, float dy, float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight) Compatibility notes
void	quadraticCurveTo(float cpx, float cpy, float x, float y)
void	rect(float x, float y, float width, float height)
void	restore() Restores the drawing style state to the last element on the 'state stack' saved by save()
void	rotate(float angle)
void	save() Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
void	scale(float sx, float sy)
void	setAlpha(float alpha)
void	setCompositeOperation(String compositeOperation)
void	setFillColor(float grayLevel)
void	setFillColor(float grayLevel, float alpha)
void	setFillColor(float r, float g, float b, float a)
void	setFillColor(float c, float m, float y, float k, float a)
void	setFillColor(String color)
void	setFillColor(String color, float alpha)
void	setFillStyle(Object arg)
void	setFont(String arg)
void	setGlobalAlpha(float arg)
void	setGlobalCompositeOperation(String arg)
void	setLineCap(String arg)
void	setLineJoin(String arg)
void	setLineWidth(float arg)
void	setMiterLimit(float arg)
void	setShadow(float width, float height, float blur)
void	setShadow(float width, float height, float blur, float grayLevel)
void	setShadow(float width, float height, float blur, float grayLevel, float alpha)
void	setShadow(float width, float height, float blur, float r, float g, float b, float a)
void	setShadow(float width, float height, float blur, float c, float m, float y, float k, float a)
void	setShadow(float width, float height, float blur, String color)
void	setShadow(float width, float height, float blur, String color, float alpha)
void	setShadowBlur(float arg)
void	setShadowColor(String arg)
void	setShadowOffsetX(float arg)
void	setShadowOffsetY(float arg)
void	setStrokeColor(float grayLevel)
void	setStrokeColor(float grayLevel, float alpha)
void	setStrokeColor(float r, float g, float b, float a)
void	setStrokeColor(float c, float m, float y, float k, float a)
void	setStrokeColor(String color)
void	setStrokeColor(String color, float alpha)
void	setStrokeStyle(Object arg)
void	setTextAlign(String arg)
void	setTextBaseline(String arg)
void	setTransform(float m11, float m12, float m21, float m22, float dx, float dy)
void	setWebkitImageSmoothingEnabled(boolean arg)
void	setWebkitLineDash(Indexable arg)
void	setWebkitLineDashOffset(float arg)
void	stroke() Strokes the subpaths with the current stroke style.
void	strokeRect(float x, float y, float width, float height) Paints a rectangle which it starting point is at (x, y) and has a w width and a h height onto the canvas, using the current stroke style.
void	strokeRect(float x, float y, float width, float height, float lineWidth) Paints a rectangle which it starting point is at (x, y) and has a w width and a h height onto the canvas, using the current stroke style.
void	strokeText(String text, float x, float y)
void	strokeText(String text, float x, float y, float maxWidth)
void	transform(float m11, float m12, float m21, float m22, float dx, float dy)
void	translate(float tx, float ty) Moves the origin point of the context to (x, y).
ImageData	webkitGetImageDataHD(float sx, float sy, float sw, float sh)
void	webkitPutImageDataHD(ImageData imagedata, float dx, float dy)
void	webkitPutImageDataHD(ImageData imagedata, float dx, float dy, float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight)

Methods inherited from interface elemental.html.CanvasRenderingContext

getCanvas

Method Detail

getFillStyle

Object getFillStyle()

Color or style to use inside shapes. Default #000 (black).

setFillStyle

void setFillStyle(Object arg)

getFont

String getFont()

Default value 10px sans-serif.

setFont

void setFont(String arg)

getGlobalAlpha

float getGlobalAlpha()

Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).

setGlobalAlpha

void setGlobalAlpha(float arg)

getGlobalCompositeOperation

String getGlobalCompositeOperation()

With globalAplpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values:

• source-atop
• source-in
• source-out
• source-over (default)
• destination-atop
• destination-in
• destination-out
• destination-over
• lighter
• xor

setGlobalCompositeOperation

void setGlobalCompositeOperation(String arg)

getLineCap

String getLineCap()

Type of endings on the end of lines. Possible values: butt (default), round, square

setLineCap

void setLineCap(String arg)

getLineJoin

String getLineJoin()

Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)

setLineJoin

void setLineJoin(String arg)

getLineWidth

float getLineWidth()

Width of lines. Default 1.0

setLineWidth

void setLineWidth(float arg)

getMiterLimit

float getMiterLimit()

Default 10.

setMiterLimit

void setMiterLimit(float arg)

getShadowBlur

float getShadowBlur()

Specifies the blurring effect. Default 0

setShadowBlur

void setShadowBlur(float arg)

getShadowColor

String getShadowColor()

Color of the shadow. Default fully-transparent black.

setShadowColor

void setShadowColor(String arg)

getShadowOffsetX

float getShadowOffsetX()

Horizontal distance the shadow will be offset. Default 0.

setShadowOffsetX

void setShadowOffsetX(float arg)

getShadowOffsetY

float getShadowOffsetY()

Vertical distance the shadow will be offset. Default 0.

setShadowOffsetY

void setShadowOffsetY(float arg)

getStrokeStyle

Object getStrokeStyle()

Color or style to use for the lines around shapes. Default #000 (black).

setStrokeStyle

void setStrokeStyle(Object arg)

getTextAlign

String getTextAlign()

Possible values: start (default), end, left, right or center.

setTextAlign

void setTextAlign(String arg)

getTextBaseline

String getTextBaseline()

setTextBaseline

void setTextBaseline(String arg)

getWebkitBackingStorePixelRatio

float getWebkitBackingStorePixelRatio()

isWebkitImageSmoothingEnabled

boolean isWebkitImageSmoothingEnabled()

Image smoothing mode; if disabled, images will not be smoothed if scaled. Requires Gecko 1.9.2

setWebkitImageSmoothingEnabled

void setWebkitImageSmoothingEnabled(boolean arg)

getWebkitLineDash

Indexable getWebkitLineDash()

An array which specifies the lengths of alternating dashes and gaps.

setWebkitLineDash

void setWebkitLineDash(Indexable arg)

getWebkitLineDashOffset

float getWebkitLineDashOffset()

Specifies where to start a dasharray on a line.

setWebkitLineDashOffset

void setWebkitLineDashOffset(float arg)

arc

void arc(float x,
         float y,
         float radius,
         float startAngle,
         float endAngle,
         boolean anticlockwise)

Adds an arc to the path which it center is at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

Parameters

x

The x axis of the coordinate for the arc's center

y

The y axis of the coordinate for the arc's center.

radius

The arc's radius

startAngle

The starting point, measured from the x axis , from which it will be drawed expressed as radians.

endAngle

The end arc's angle to which it will be drawed expressed as radians.

anticlockwise Optional from Gecko 2.0

When true draws the arc anticlockwise, otherwise in a clockwise direction.

arcTo

void arcTo(float x1,
           float y1,
           float x2,
           float y2,
           float radius)

Adds an arc with the given control points and radius, connected to the previous point by a straight line.

Parameters

x1

y1

x2

y2

radius

The arc's radius.

beginPath

void beginPath()

bezierCurveTo

void bezierCurveTo(float cp1x,
                   float cp1y,
                   float cp2x,
                   float cp2y,
                   float x,
                   float y)

clearRect

void clearRect(float x,
               float y,
               float width,
               float height)

Clears the rectangle defined by it starting point at (x, y) and has a w width and a h height.

Parameters

x

The x axis of the coordinate for the rectangle starting point.

y

The y axis of the coordinate for the rectangle starting point.

width

The rectangle's width.

height

The rectangle's height.

clearShadow

void clearShadow()

clip

void clip()

closePath

void closePath()

createImageData

ImageData createImageData(ImageData imagedata)

createImageData

ImageData createImageData(float sw,
                          float sh)

createLinearGradient

CanvasGradient createLinearGradient(float x0,
                                    float y0,
                                    float x1,
                                    float y1)

createPattern

CanvasPattern createPattern(CanvasElement canvas,
                            String repetitionType)

Parameters

image

A DOM element to use as the source image for the pattern. This can be any element, although typically you'll use an Image or <canvas> .

repetition

?

Return value

A new DOM canvas pattern object for use in pattern-based operations.

Exceptions thrown

NS_ERROR_DOM_INVALID_STATE_ERR Requires Gecko 10.0

The specified <canvas> element for the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).

createPattern

CanvasPattern createPattern(ImageElement image,
                            String repetitionType)

Parameters

image

A DOM element to use as the source image for the pattern. This can be any element, although typically you'll use an Image or <canvas> .

repetition

?

Return value

A new DOM canvas pattern object for use in pattern-based operations.

Exceptions thrown

NS_ERROR_DOM_INVALID_STATE_ERR Requires Gecko 10.0

The specified <canvas> element for the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).

createRadialGradient

CanvasGradient createRadialGradient(float x0,
                                    float y0,
                                    float r0,
                                    float x1,
                                    float y1,
                                    float r1)

drawImage

void drawImage(ImageElement image,
               float x,
               float y)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(ImageElement image,
               float x,
               float y,
               float width,
               float height)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(ImageElement image,
               float sx,
               float sy,
               float sw,
               float sh,
               float dx,
               float dy,
               float dw,
               float dh)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(CanvasElement canvas,
               float x,
               float y)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(CanvasElement canvas,
               float x,
               float y,
               float width,
               float height)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(CanvasElement canvas,
               float sx,
               float sy,
               float sw,
               float sh,
               float dx,
               float dy,
               float dw,
               float dh)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(VideoElement video,
               float x,
               float y)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(VideoElement video,
               float x,
               float y,
               float width,
               float height)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImage

void drawImage(VideoElement video,
               float sx,
               float sy,
               float sw,
               float sh,
               float dx,
               float dy,
               float dw,
               float dh)

Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

Parameters

image

An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.

dx

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

sx

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.

sh

The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown

INDEX_SIZE_ERR

If the canvas or source rectangle width or height is zero.

INVALID_STATE_ERR

The image has no image data.

TYPE_MISMATCH_ERR

The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
• Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
• Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.

drawImageFromRect

void drawImageFromRect(ImageElement image)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh,
                       float dx)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh,
                       float dx,
                       float dy)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh,
                       float dx,
                       float dy,
                       float dw)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh,
                       float dx,
                       float dy,
                       float dw,
                       float dh)

drawImageFromRect

void drawImageFromRect(ImageElement image,
                       float sx,
                       float sy,
                       float sw,
                       float sh,
                       float dx,
                       float dy,
                       float dw,
                       float dh,
                       String compositeOperation)

fill

void fill()

Fills the subpaths with the current fill style.

fillRect

void fillRect(float x,
              float y,
              float width,
              float height)

Draws a filled rectangle at (x, y) position whose size is determined by width and height.

Parameters

x

The x axis of the coordinate for the rectangle starting point.

y

The y axis of the coordinate for the rectangle starting point.

width

The rectangle's width.

height

The rectangle's height.

fillText

void fillText(String text,
              float x,
              float y)

fillText

void fillText(String text,
              float x,
              float y,
              float maxWidth)

getImageData

ImageData getImageData(float sx,
                       float sy,
                       float sw,
                       float sh)

Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has a sw width and sh height.

Parameters

sx

The x axis of the coordinate for the rectangle startpoint from which the ImageData will be extracted.

sy

The x axis of the coordinate for the rectangle endpoint from which the ImageData will be extracted.

sw

The width of the rectangle from which the ImageData will be extracted.

sh

The height of the rectangle from which the ImageData will be extracted.

Return value

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

isPointInPath

boolean isPointInPath(float x,
                      float y)

Reports whether or not the specified point is contained in the current path.

Parameters

x

The X coordinate of the point to check.

y

The Y coordinate of the point to check.

Return value

true if the specified point is contained in the current path; otherwise false.

Compatibility notes

• Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.

lineTo

void lineTo(float x,
            float y)

Connects the last point in the subpath to the x, y coordinates with a straight line.

Parameters

x

The x axis of the coordinate for the end of the line.

y

The y axis of the coordinate for the end of the line.

measureText

TextMetrics measureText(String text)

moveTo

void moveTo(float x,
            float y)

Moves the starting point of a new subpath to the (x, y) coordinates.

Parameters

x

The x axis of the point.

y

The y axis of the point.

putImageData

void putImageData(ImageData imagedata,
                  float dx,
                  float dy)

Compatibility notes

• Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) , non-finite values to any of these parameters causes the call to putImageData() to be silently ignored, rather than throwing an exception.

putImageData

void putImageData(ImageData imagedata,
                  float dx,
                  float dy,
                  float dirtyX,
                  float dirtyY,
                  float dirtyWidth,
                  float dirtyHeight)

Compatibility notes

• Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) , non-finite values to any of these parameters causes the call to putImageData() to be silently ignored, rather than throwing an exception.

quadraticCurveTo

void quadraticCurveTo(float cpx,
                      float cpy,
                      float x,
                      float y)

rect

void rect(float x,
          float y,
          float width,
          float height)

restore

void restore()

Restores the drawing style state to the last element on the 'state stack' saved by save()

rotate

void rotate(float angle)

save

void save()

Saves the current drawing style state using a stack so you can revert any change you make to it using restore().

scale

void scale(float sx,
           float sy)

setAlpha

void setAlpha(float alpha)

setCompositeOperation

void setCompositeOperation(String compositeOperation)

setFillColor

void setFillColor(String color)

setFillColor

void setFillColor(String color,
                  float alpha)

setFillColor

void setFillColor(float grayLevel)

setFillColor

void setFillColor(float grayLevel,
                  float alpha)

setFillColor

void setFillColor(float r,
                  float g,
                  float b,
                  float a)

setFillColor

void setFillColor(float c,
                  float m,
                  float y,
                  float k,
                  float a)

setShadow

void setShadow(float width,
               float height,
               float blur)

setShadow

void setShadow(float width,
               float height,
               float blur,
               String color)

setShadow

void setShadow(float width,
               float height,
               float blur,
               String color,
               float alpha)

setShadow

void setShadow(float width,
               float height,
               float blur,
               float grayLevel)

setShadow

void setShadow(float width,
               float height,
               float blur,
               float grayLevel,
               float alpha)

setShadow

void setShadow(float width,
               float height,
               float blur,
               float r,
               float g,
               float b,
               float a)

setShadow

void setShadow(float width,
               float height,
               float blur,
               float c,
               float m,
               float y,
               float k,
               float a)

setStrokeColor

void setStrokeColor(String color)

setStrokeColor

void setStrokeColor(String color,
                    float alpha)

setStrokeColor

void setStrokeColor(float grayLevel)

setStrokeColor

void setStrokeColor(float grayLevel,
                    float alpha)

setStrokeColor

void setStrokeColor(float r,
                    float g,
                    float b,
                    float a)

setStrokeColor

void setStrokeColor(float c,
                    float m,
                    float y,
                    float k,
                    float a)

setTransform

void setTransform(float m11,
                  float m12,
                  float m21,
                  float m22,
                  float dx,
                  float dy)

stroke

void stroke()

Strokes the subpaths with the current stroke style.

strokeRect

void strokeRect(float x,
                float y,
                float width,
                float height)

Paints a rectangle which it starting point is at (x, y) and has a w width and a h height onto the canvas, using the current stroke style.

Parameters

x

The x axis for the starting point of the rectangle.

y

The y axis for the starting point of the rectangle.

w

The rectangle's width.

h

The rectangle's height.

strokeRect

void strokeRect(float x,
                float y,
                float width,
                float height,
                float lineWidth)

Paints a rectangle which it starting point is at (x, y) and has a w width and a h height onto the canvas, using the current stroke style.

Parameters

x

The x axis for the starting point of the rectangle.

y

The y axis for the starting point of the rectangle.

w

The rectangle's width.

h

The rectangle's height.

strokeText

void strokeText(String text,
                float x,
                float y)

strokeText

void strokeText(String text,
                float x,
                float y,
                float maxWidth)

transform

void transform(float m11,
               float m12,
               float m21,
               float m22,
               float dx,
               float dy)

translate

void translate(float tx,
               float ty)

Moves the origin point of the context to (x, y).

Parameters

x

The x axis for the point to be considered as the origin.

y

The x axis for the point to be considered as the origin.

webkitGetImageDataHD

ImageData webkitGetImageDataHD(float sx,
                               float sy,
                               float sw,
                               float sh)

webkitPutImageDataHD

void webkitPutImageDataHD(ImageData imagedata,
                          float dx,
                          float dy)

webkitPutImageDataHD

void webkitPutImageDataHD(ImageData imagedata,
                          float dx,
                          float dy,
                          float dirtyX,
                          float dirtyY,
                          float dirtyWidth,
                          float dirtyHeight)