CanvasRenderingContext2D Interface / dart:html Library / Dart API Reference

CanvasRenderingContext2D Interface

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.

from MDN

Extends

CanvasRenderingContext

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.

from MDN

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.

from MDN

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.

from MDN

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

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).

from MDN

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 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.

from MDN

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 fill() #

Fills the subpaths with the current fill style.

from MDN

void fill();

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.

from MDN

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.

from MDN

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.

from MDN

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.

from MDN

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.

from MDN

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.

from MDN

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() #

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

from MDN

void restore();

Code void rotate(num angle) #

void rotate(num angle);

Code void save() #

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

from MDN

void save();

Code void scale(num sx, num sy) #

void scale(num sx, num sy);

Code void setAlpha(num alpha) #

void setAlpha(num alpha);

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 setLineCap(String cap) #

void setLineCap(String cap);

Code void setLineJoin(String join) #

void setLineJoin(String join);

Code void setLineWidth(num width) #

void setLineWidth(num width);

Code void setMiterLimit(num limit) #

void setMiterLimit(num limit);

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 stroke() #

Strokes the subpaths with the current stroke style.

from MDN

void stroke();

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.

from MDN

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.

from MDN

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 #

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

from MDN

Dynamic fillStyle;

Code String font #

Default value 10px sans-serif.

from MDN

String font;

Code num globalAlpha #

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

from MDN

num globalAlpha;

Code String globalCompositeOperation #

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

from MDN

String globalCompositeOperation;

Code String lineCap #

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

from MDN

String lineCap;

Code String lineJoin #

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

from MDN

String lineJoin;

Code num lineWidth #

Width of lines. Default 1.0

from MDN

num lineWidth;

Code num miterLimit #

Default 10.

from MDN

num miterLimit;

Code num shadowBlur #

Specifies the blurring effect. Default 0

from MDN

num shadowBlur;

Code String shadowColor #

Color of the shadow. Default fully-transparent black.

from MDN

String shadowColor;

Code num shadowOffsetX #

Horizontal distance the shadow will be offset. Default 0.

from MDN

num shadowOffsetX;

Code num shadowOffsetY #

Vertical distance the shadow will be offset. Default 0.

from MDN

num shadowOffsetY;

Code var strokeStyle #

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

from MDN

Dynamic strokeStyle;

Code String textAlign #

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

from MDN

String textAlign;

Code String textBaseline #

String textBaseline;

Code final num webkitBackingStorePixelRatio #

final num webkitBackingStorePixelRatio;

Code bool webkitImageSmoothingEnabled #

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

from MDN

bool webkitImageSmoothingEnabled;

Code List webkitLineDash #

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

from MDN

List webkitLineDash;

Code num webkitLineDashOffset #

Specifies where to start a dasharray on a line.

from MDN

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.