CanvasRenderingContext2D Interface
Extends
Methods
Code void arc(num x, num y, num radius, num startAngle, num endAngle, bool 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.
void arc(num x, num y, num radius, num startAngle, num endAngle, bool anticlockwise);
Code void arcTo(num x1, num y1, num x2, num y2, num 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.
void arcTo(num x1, num y1, num x2, num y2, num radius);
Code void beginPath() #
void beginPath();
Code void bezierCurveTo(num cp1x, num cp1y, num cp2x, num cp2y, num x, num y) #
void bezierCurveTo(num cp1x, num cp1y, num cp2x, num cp2y, num x, num y);
Code void clearRect(num x, num y, num width, num 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.
void clearRect(num x, num y, num width, num height);
Code void clearShadow() #
void clearShadow();
Code void clip() #
void clip();
Code void closePath() #
void closePath();
Code ImageData createImageData(imagedata_OR_sw, [num sh]) #
ImageData createImageData(imagedata_OR_sw, [num sh]);
Code CanvasGradient createLinearGradient(num x0, num y0, num x1, num y1) #
CanvasGradient createLinearGradient(num x0, num y0, num x1, num y1);
Code CanvasPattern createPattern(canvas_OR_image, String repetitionType) #
Parameters
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 theimage
parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).
CanvasPattern createPattern(canvas_OR_image, String repetitionType);
Code CanvasGradient createRadialGradient(num x0, num y0, num r0, num x1, num y1, num r1) #
CanvasGradient createRadialGradient(num x0, num y0, num r0, num x1, num y1, num r1);
Code void drawImage(canvas_OR_image_OR_video, num sx_OR_x, num sy_OR_y, [num sw_OR_width, num height_OR_sh, num dx, num dy, num dw, num 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
andsy
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
andsh
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.
void drawImage(canvas_OR_image_OR_video, num sx_OR_x, num sy_OR_y, [num sw_OR_width, num height_OR_sh, num dx, num dy, num dw, num dh]);
Code void drawImageFromRect(ImageElement image, [num sx, num sy, num sw, num sh, num dx, num dy, num dw, num dh, String compositeOperation]) #
void drawImageFromRect(ImageElement image, [num sx, num sy, num sw, num sh, num dx, num dy, num dw, num dh, String compositeOperation]);
Code void fillRect(num x, num y, num width, num 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.
void fillRect(num x, num y, num width, num height);
Code void fillText(String text, num x, num y, [num maxWidth]) #
void fillText(String text, num x, num y, [num maxWidth]);
Code ImageData getImageData(num sx, num sy, num sw, num 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.
ImageData getImageData(num sx, num sy, num sw, num sh);
Code bool isPointInPath(num x, num 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.
bool isPointInPath(num x, num y);
Code void lineTo(num x, num 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.
void lineTo(num x, num y);
Code TextMetrics measureText(String text) #
TextMetrics measureText(String text);
Code void moveTo(num x, num 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.
void moveTo(num x, num y);
Code void putImageData(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num 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.
void putImageData(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num dirtyHeight]);
Code void quadraticCurveTo(num cpx, num cpy, num x, num y) #
void quadraticCurveTo(num cpx, num cpy, num x, num y);
Code void rect(num x, num y, num width, num height) #
void rect(num x, num y, num width, num height);
Code void restore() #
void restore();
Code void save() #
void save();
Code void setCompositeOperation(String compositeOperation) #
void setCompositeOperation(String compositeOperation);
Code void setFillColor(c_OR_color_OR_grayLevel_OR_r, [num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]) #
void setFillColor(c_OR_color_OR_grayLevel_OR_r, [num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]);
Code void setShadow(num width, num height, num blur, [c_OR_color_OR_grayLevel_OR_r, num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]) #
void setShadow(num width, num height, num blur, [c_OR_color_OR_grayLevel_OR_r, num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]);
Code void setStrokeColor(c_OR_color_OR_grayLevel_OR_r, [num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]) #
void setStrokeColor(c_OR_color_OR_grayLevel_OR_r, [num alpha_OR_g_OR_m, num b_OR_y, num a_OR_k, num a]);
Code void setTransform(num m11, num m12, num m21, num m22, num dx, num dy) #
void setTransform(num m11, num m12, num m21, num m22, num dx, num dy);
Code void strokeRect(num x, num y, num width, num height, [num 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.
void strokeRect(num x, num y, num width, num height, [num lineWidth]);
Code void strokeText(String text, num x, num y, [num maxWidth]) #
void strokeText(String text, num x, num y, [num maxWidth]);
Code void transform(num m11, num m12, num m21, num m22, num dx, num dy) #
void transform(num m11, num m12, num m21, num m22, num dx, num dy);
Code void translate(num tx, num 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.
void translate(num tx, num ty);
Code ImageData webkitGetImageDataHD(num sx, num sy, num sw, num sh) #
ImageData webkitGetImageDataHD(num sx, num sy, num sw, num sh);
Code void webkitPutImageDataHD(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num dirtyHeight]) #
void webkitPutImageDataHD(ImageData imagedata, num dx, num dy, [num dirtyX, num dirtyY, num dirtyWidth, num dirtyHeight]);
Fields
Code var fillStyle #
#000
(black).
Dynamic fillStyle;
Code num globalAlpha #
1.0
(opaque).
num globalAlpha;
Code String globalCompositeOperation #
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
String globalCompositeOperation;
Code String lineJoin #
round
, bevel
, miter
(default)
String lineJoin;
Code num shadowOffsetX #
num shadowOffsetX;
Code var strokeStyle #
#000
(black).
Dynamic strokeStyle;
Code bool webkitImageSmoothingEnabled #
bool webkitImageSmoothingEnabled;
Code List webkitLineDash #
List webkitLineDash;
Code num webkitLineDashOffset #
num webkitLineDashOffset;
This page includes content from the Mozilla Foundation that is graciously licensed under a Creative Commons: Attribution-Sharealike license. Mozilla has no other association with Dart or dartlang.org. We encourage you to improve the web by contributing to The Mozilla Developer Network.