CanvasRenderingContext2D

  • Revision slug: Web/API/CanvasRenderingContext2D
  • Revision title: CanvasRenderingContext2D
  • Revision id: 436499
  • Created:
  • Creator: deepakyadav
  • Is current revision? No
  • Comment

Revision Content

The 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. To get this object, call getContext() on a <canvas>, supplying "2d" as the argument:

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

Once you have the 2D rendering context for a canvas, you can draw within it. For example:

ctx.fillStyle = "rgb(200,0,0)";  
ctx.fillRect(10, 10, 55, 50);  

See the Canvas tutorial for more information, examples, and resources.

Method overview

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise {{ optional_inline() }});
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
void beginPath();
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void clearRect(in float x, in float y, in float width, in float height);
void clip();
void closePath();
ImageData createImageData(in float width, in float height);
ImageData createImageData(Imagedata imagedata);
nsIDOMCanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);
nsIDOMCanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
void drawImage(in nsIDOMElement image, in float a1, in float a2, in float a3 {{ optional_inline() }}, in float a4 {{ optional_inline() }}, in float a5 {{ optional_inline() }}, in float a6 {{ optional_inline() }}, in float a7 {{ optional_inline() }}, in float a8 {{ optional_inline() }});
boolean drawCustomFocusRing(Element element);
void drawSystemFocusRing(Element element);
void fill();
void fillRect(in float x, in float y, in float width, in float height);
void fillText(in DOMString text, in float x, in float y, in float maxWidth {{ optional_inline() }});
ImageData getImageData(in float x, in float y, in float width, in float height);
sequence <unrestricted double> getLineDash()
boolean isPointInPath(in float x, in float y);
boolean isPointInStroke(in float x, in float y);
void lineTo(in float x, in float y);
nsIDOMTextMetrics measureText(in DOMString text);
void moveTo(in float x, in float y);
void putImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX {{ optional_inline() }}, in float dirtyY {{ optional_inline() }}, in float dirtyWidth {{ optional_inline() }}, in float dirtyHeight {{ optional_inline() }});
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void rect(in float x, in float y, in float width, in float height);
void restore();
void rotate(in float angle);
void save();
void scale(in float x, in float y);
void scrollPathIntoView();
void setLineDash(in sequence <unrestricted double> segments);
void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void stroke();
void strokeRect(in float x, in float y, in float w, in float h);
void strokeText(in DOMString text, in float x, in float y, in float maxWidth {{ optional_inline() }});
void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void translate(in float x, in float y);

Gecko-specific Method overview

void asyncDrawXULElement(in nsIDOMXULElement elem, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags {{ optional_inline() }}); {{ gecko_minversion_inline("2.0") }}
void drawWindow(in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags {{ optional_inline() }});
void getFillStyle_multi(out DOMString str, out nsISupports iface, out long type); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void getImageData_explicit(in long x, in long y, in unsigned long width, in unsigned long height, [array, size_is(dataLen)] in octet dataPtr, in unsigned long dataLen); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void getStrokeStyle_multi(out DOMString str, out nsISupports iface, out long type); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void mozDrawText(in DOMString textToDraw); {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)
float mozMeasureText(in DOMString textToMeasure); {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)
void mozPathText(in DOMString textToPath); {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke); {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)
void putImageData_explicit(in long x, in long y, in unsigned long width, in unsigned long height, [array, size_is(dataLen)] in octet dataPtr, in unsigned long dataLen, in boolean hasDirtyRect, in long dirtyX, in long dirtyY, in long dirtyWidth, in long dirtyHeight); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void setFillStyle_multi(in DOMString str, in nsISupports iface); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void setStrokeStyle_multi(in DOMString str, in nsISupports iface); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}

WebKit-specific Method overview

void clearShadow();
void drawImageFromRect(in HTMLImageElement image, in float sx {{ optional_inline() }}, in float sy {{ optional_inline() }}, in float sw {{ optional_inline() }}, in float sh {{ optional_inline() }}, in float dx {{ optional_inline() }}, in float dy {{ optional_inline() }}, in float dw {{ optional_inline() }}, in float dh {{ optional_inline() }}, in DOMString compositeOperation {{ optional_inline() }});
void setAlpha();
void setCompositeOperation(in DOMString compositeOperation);
void setLineWidth(in float width);
void setLineCap(in DOMString cap);
void setLineJoin(in DOMString join);
void setMiterLimit(in float limit);
void setStrokeColor(in DOMString color, in float alpha {{ optional_inline() }});
void setStrokeColor(in float grayLevel, in float alpha {{ optional_inline() }});
void setStrokeColor(in float r, in float g, in float b, in float a);
void setStrokeColor(in float c, in float m, in float y, in float k, in float a);
void setFillColor(in DOMString color, in float alpha {{ optional_inline() }});
void setFillColor(in float grayLevel, in float alpha {{ optional_inline() }});
void setFillColor(in float r, in float g, in float b, in float a);
void setFillColor(in float c, in float m, in float y, in float k, in float a);
void setShadow(in float width, in float height, in float blur, in DOMString color {{ optional_inline() }}, in float alpha {{ optional_inline() }});
void setShadow(in float width, in float height, in float blur, in float grayLevel, in float alpha {{ optional_inline() }});
void setShadow(in float width, in float height, in float blur, in float r, in float g, in float b, in float a);
void setShadow(in float width, in float height, in float blur, in float c, in float m, in float y, in float k, in float a);

Attributes

Attribute Type Description
canvas {{ Interface("nsIDOMHTMLCanvasElement") }} Back-reference to the canvas element for which this context was created. Read only.
fillStyle {{ Interface("nsIVariant") }} Color or style to use inside shapes. Default #000 (black).
font {{ domxref("DOMString") }} Default value 10px sans-serif.
globalAlpha float Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
globalCompositeOperation {{ domxref("DOMString") }} With globalAlpha 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
  • darker
  • copy
  • xor
lineCap {{ domxref("DOMString") }} Type of endings on the end of lines. Possible values: butt (default), round, square
lineDashOffset float Specifies where to start a dasharray on a line.
lineJoin {{ domxref("DOMString") }} Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)
lineWidth float Width of lines. Default 1.0
miterLimit float Default 10.
shadowBlur float Specifies the blurring effect. Default 0
shadowColor {{ domxref("DOMString") }} Color of the shadow. Default fully-transparent black.
shadowOffsetX float Horizontal distance the shadow will be offset. Default 0.
shadowOffsetY float Vertical distance the shadow will be offset. Default 0.
strokeStyle {{ Interface("nsIVariant") }} Color or style to use for the lines around shapes. Default #000 (black).
textAlign {{ domxref("DOMString") }} Possible values: start (default), end, left, right or center.
textBaseline {{ domxref("DOMString") }} Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom

Gecko-specific attributes

Attribute Type Description
mozCurrentTransform jsval Sets or gets the current transformation matrix. {{ gecko_minversion_inline("7.0") }}
mozCurrentTransformInverse jsval Set or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}
mozDash array of float An array which specifies the lengths of alternating dashes and gaps. {{ gecko_minversion_inline("7.0") }} (see {{ bug("740284") }} for implementing the HTML5 spec version / unprefixing)
mozDashOffset float Specifies where to start a dasharray on a line. {{ gecko_minversion_inline("7.0") }} (see {{ bug("740284") }} for implementing the HTML5 spec version / unprefixing)
mozFillRule {{ domxref("DOMString") }} The fill rule to use. This must be one of evenodd or nonzero (default).
mozImageSmoothingEnabled boolean Image smoothing mode; if disabled, images will not be smoothed if scaled. {{ gecko_minversion_inline("1.9.2") }}
mozTextStyle {{ domxref("DOMString") }} {{ gecko_minversion_inline("1.9") }} {{ deprecated_inline() }} Deprecated in favor of the HTML5 font attribute described above.

WebKit-specific attributes

Attribute Type Description
webkitLineDash array of float An array which specifies the lengths of alternating dashes and gaps. (expected to be unprefixed / updated to HTML5 spec as per {{ webkitbug("80674") }})
webkitLineDashOffset float Specifies where to start a dasharray on a line. (expected to be unprefixed / updated to HTML5 spec as per {{ webkitbug("80674") }})

Constants

Gecko-specific constants

Constant Value Description
DRAWWINDOW_DRAW_CARET 0x01 Show the caret if appropriate when drawing. {{ gecko_minversion_inline("1.9.1") }}
DRAWWINDOW_DO_NOT_FLUSH 0x02 Do not flush pending layout notifications that could otherwise be batched up. {{ gecko_minversion_inline("1.9.1") }}
DRAWWINDOW_DRAW_VIEW 0x04 Draw scrollbars and scroll the viewport if they are present. {{ gecko_minversion_inline("1.9.2") }}
DRAWWINDOW_USE_WIDGET_LAYERS 0x08 Use the widget layer manager if available. This means hardware acceleration may be used, but it might actually be slower or lower quality than normal. It will however more accurately reflect the pixels rendered to the screen. {{ gecko_minversion_inline("2.0") }}
DRAWWINDOW_ASYNC_DECODE_IMAGES 0x10 Do not synchronously decode images - draw what we have. {{ gecko_minversion_inline("2.0") }}

Methods

arc()

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 arc(
  in float x,
  in float y,
  in float radius,
  in float startAngle,
  in float endAngle,
  in boolean anticlockwise [optional]
);
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_inline("2.0") }}
When true draws the arc anticlockwise, otherwise in a clockwise direction.

arcTo()

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

void arcTo(
  in float x1,
  in float y1,
  in float x2,
  in float y2,
  in float radius
);
Parameters
x1
 
y1
 
x2
 
y2
 
radius
The arc's radius.

beginPath()

Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path.

void beginPath();
Parameters

None.

bezierCurveTo()

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

clearRect()

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

void clearRect(
  in float x,
  in float y,
  in float width,
  in float 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.

clip()

Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.

void clip();
Parameters

None.

closePath()

Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

void closePath();
Parameters

None.

createImageData()

Creates a new, blank {{ domxref("ImageData") }} object with the specified dimensions. All of the pixels in the new object are transparent black.

ImageData createImageData(
  in float width,
  in float height
);
ImageData createImageData(
  ImageData imagedata
);
Parameters
width
The width to give the new {{ domxref("ImageData") }} object.
height
The height to give the new {{ domxref("ImageData") }} object.
imagedata
An existing {{ domxref("ImageData") }} object from which to copy the width and height. The image itself is not copied.
Return value

A new {{ domxref("ImageData") }} object with the specified width and height. The new object is filled with transparent black pixels.

createLinearGradient()

nsIDOMCanvasGradient createLinearGradient(
  in float x0,
  in float y0,
  in float x1,
  in float y1
);
Parameters
x0
 
y0
 
x1
 
y1
 
Return value

nsIDOMCanvasGradient

createPattern()

nsIDOMCanvasPattern createPattern(
  in nsIDOMHTMLElement image,
  in DOMString repetition
);
Parameters
image
A DOM {{ domxref("element") }} to use as the source image for the pattern. This can be any element, although typically you'll use an {{ domxref("Image") }} or {{ HTMLElement("canvas") }}.
repetition
?
Return value

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

Exceptions thrown
NS_ERROR_DOM_INVALID_STATE_ERR {{ gecko_minversion_inline("10.0") }}
The specified {{ HTMLElement("canvas") }} element for the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).

createRadialGradient()

nsIDOMCanvasGradient createRadialGradient(
  in float x0,
  in float y0,
  in float r0,
  in float x1,
  in float y1,
  in float r1
);
Parameters
x0
 
y0
 
r0
 
x1
 
y1
 
r1
 
Return value

nsIDOMCanvasGradient

drawCustomFocusRing()

boolean drawCustomFocusRing(Element element);
Parameters
element
 
Return value

boolean

drawImage()

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

void drawImage(
  in nsIDOMElement image,
  in float dx,
  in float dy
);

void drawImage(
  in nsIDOMElement image,
  in float dx,
  in float dy,
  in float dw,
  in float dh
);

void drawImage(
  in nsIDOMElement image,
  in float sx,
  in float sy,
  in float sw,
  in float sh,
  in float dx, 
  in float dy,
  in float dw,
  in float dh
);
Parameters
image
An element to draw into the context; the specification permits any image element (that is, {{ HTMLElement("img") }}, {{ HTMLElement("canvas") }}, and {{ HTMLElement("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.

drawImage.png

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 {{ geckoRelease("7.0") }}, 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 {{ geckoRelease("5.0") }}.
  • Gecko 9.0 {{ geckoRelease("9.0") }} now correctly supports CORS for drawing images across domains without tainting the canvas.
  • Gecko 11.0 {{ geckoRelease("11.0") }} now allows SVG-as-an-image to be drawn into a canvas without tainting the canvas.

drawSystemFocusRing()

void drawSystemFocusRing(Element element);
Parameters
element
 

fill()

Fills the subpaths with the current fill style.

void fill();
Parameters

None.

fillRect()

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

void fillRect(
  in float x,
  in float y,
  in float width,
  in float 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(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth [optional]
);
Parameters
text
 
x
 
y
 
maxWidth {{ optional_inline() }}
 

getImageData()

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.

void getImageData(   
  in double sx, 
  in double sy, 
  in double sw, 
  in double sh
);
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.

getLineDash()

Returns an dash list array containing an even number of non-negative numbers.

sequence getLineDash(   
);
Parameters

None.

Return value

Returns an dash list array containing an even number of non-negative numbers.

isPointInPath()

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

boolean isPointInPath(
  in float x,
  in float y
);
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 {{ geckoRelease("7.0") }}, 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.

isPointInStroke()

Reports whether or not the specified point is inside the area contained by the stroking of a path.

boolean isPointInStroke(
  in float x,
  in float y
);
Parameters
x
The X coordinate of the point to check.
y
The Y coordinate of the point to check.
Return value

true if the point is inside the area contained by the stroking of a path; otherwise false.

lineTo()

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

void lineTo(
  in float x,
  in float y
);
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()

nsIDOMTextMetrics measureText(
  in DOMString text
);
Parameters
text
 
Return value

nsIDOMTextMetrics

moveTo()

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

void moveTo(
  in float x,
  in float y
);
Parameters
x
The x axis of the point.
y
The y axis of the point.

putImageData()

void putImageData(
  in long x,
  in long y,
  in unsigned long width,
  in unsigned long height,
  [array, size_is(dataLen)] in octet dataPtr,
  in unsigned long dataLen,
  in boolean hasDirtyRect,
  in long dirtyX, [optional]
  in long dirtyY, [optional]
  in long dirtyWidth, [optional]
  in long dirtyHeight [optional]
);
Parameters
x
 
y
 
width
 
height
 
dataPtr
 
dataLen
 
hasDirtyRect
 
dirtyX {{ optional_inline() }}
 
dirtyY {{ optional_inline() }}
 
dirtyWidth {{ optional_inline() }}
 
dirtyHeight {{ optional_inline() }}
 
Compatibility notes
  • Starting in Gecko 10.0 {{ geckoRelease("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(
  in float cpx,
  in float cpy,
  in float x,
  in float y
);
Parameters
cpx
 
cpy
 
x
 
y
 

rect()

void rect(
  in float x,
  in float y,
  in float w,
  in float h
);
Parameters
x
 
y
 
w
 
h
 

restore()

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

void restore();
Parameters

None.

rotate()

void rotate(
  in float angle
);
Parameters
angle
 

save()

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

void save();
Parameters

None.

scale()

void scale(
  in float x,
  in float y
);
Parameters
x
 
y
 

scrollPathIntoView()

void scrollPathIntoView();
Parameters

None.

setLineDash()

void setLineDash(
  sequence segments
);
Parameters
segments
An even number of non-negative numbers specifying a dash list.

setTransform()

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

stroke()

Strokes the subpaths with the current stroke style.

void stroke();
Parameters

None.

strokeRect()

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(
  in float x,
  in float y,
  in float w,
  in float h
);
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(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth [optional]
);
Parameters
text
 
x
 
y
 
maxWidth {{ optional_inline() }}
 

transform()

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

translate()

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

void translate(
  in float x,
  in float 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.

Gecko-specific methods

{{ method_gecko_minversion("asyncDrawXULElement","2.0") }}

void asyncDrawXULElement(
  in nsIDOMXULElement elem,
  in float x,
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);
Parameters
elem
 
x
 
y
 
w
 
h
 
bgColor
 
flags {{ optional_inline() }}
 

drawWindow()

This API cannot currently be used by Web content. It is chrome only.

Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

Of course, the rendering obeys the current {{ manch("scale") }}, {{ manch("transform") }} and globalAlpha values.

Hints: -- If 'rgba(0,0,0,0)' is used for the background color, the drawing will be transparent wherever the window is transparent. -- Top-level browsed documents are usually not transparent because the user's background-color preference is applied, but IFRAMEs are transparent if the page doesn't set a background. -- If an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.

void drawWindow(
  in nsIDOMWindow window,
  in float x,
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);
Parameters
window
 
x
 
y
 
w
 
h
Specify the area of the window to render, in CSS pixels.
bgColor
The canvas is filled with this color before we render the window into it. This color may be transparent/translucent. It is given as a CSS color string (for example, rgb() or rgba()).
flags {{ optional_inline() }} {{ gecko_minversion_inline("1.9.1") }}
Used to better control the drawWindow call. Flags can be ORed together.

{{ method_noscript("getFillStyle_multi") }}

Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.

void getFillStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
Parameters
str
 
iface
 
type
 

{{ method_noscript("getImageData_explicit") }}

Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.

void getImageData_explicit(
  in long x,
  in long y,
  in unsigned long width,
  in unsigned long height,
  [array, size_is(dataLen)] in octet dataPtr,
  in unsigned long dataLen
);
Parameters
x
 
y
 
width
 
height
 
dataPtr
 
dataLen
 

{{ method_noscript("getStrokeStyle_multi") }}

Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.

void getStrokeStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
Parameters
str
 
iface
 
type
 

{{ method_unimplemented("mozDrawText") }}

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.

void mozDrawText(
  in DOMString textToDraw
);
Parameters
textToDraw
 

{{ method_unimplemented("mozMeasureText") }}

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.

float mozMeasureText(
  in DOMString textToMeasure
);
Parameters
textToMeasure
 
Return value

 

{{ method_unimplemented("mozPathText") }}

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.

void mozPathText(
  in DOMString textToPath
);
Parameters
textToPath
 

{{ method_unimplemented("mozTextAlongPath") }}

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
Parameters
textToDraw
 
stroke
 

{{ method_noscript("setFillStyle_multi") }}

Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.

void setFillStyle_multi(
  in DOMString str,
  in nsISupports iface
);
Parameters
str
 
iface
 

{{ method_noscript("setStrokeStyle_multi") }}

Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.

void setStrokeStyle_multi(
  in DOMString str,
  in nsISupports iface
);
Parameters
str
 
iface
 

WebKit-specific methods

clearShadow()

void clearShadow();
Parameters

None.

drawImageFromRect()

void drawImageFromRect(
  in HTMLImageElement image,
  in [Optional] float sx,
  in [Optional] float sy,
  in [Optional] float sw,
  in [Optional] float sh,
  in [Optional] float dx, 
  in [Optional] float dy,
  in [Optional] float dw,
  in [Optional] float dh,
  in [Optional] DOMString compositeOperation
);

setAlpha()

void setAlpha(
  in float alpha
);

setCompositeOperation()

void setCompositeOperation(
  in DOMString compositeOperation
);

setLineWidth()

void setLineWidth(
  in float width
);

setLineCap()

void setLineCap(
  in DOMString cap
);

setLineJoin()

void setLineJoin(
  in DOMString join
);

setMiterLimit()

void setMiterLimit(
  in float limit
);

setStrokeColor()

void setStrokeColor(in DOMString color, in [Optional] float alpha);
void setStrokeColor(in float grayLevel, in [Optional] float alpha);
void setStrokeColor(in float r, in float g, in float b, in float a);
void setStrokeColor(in float c, in float m, in float y, in float k, in float a);

setFillColor()

void setFillColor(in DOMString color, in [Optional] float alpha);
void setFillColor(in float grayLevel, in [Optional] float alpha);
void setFillColor(in float r, in float g, in float b, in float a);
void setFillColor(in float c, in float m, in float y, in float k, in float a);

setShadow()

void setShadow(in float width, in float height, in float blur, in [Optional] DOMString color, in [Optional] float alpha);
void setShadow(in float width, in float height, in float blur, in float grayLevel, in [Optional] float alpha);
void setShadow(in float width, in float height, in float blur, in float r, in float g, in float b, in float a);
void setShadow(in float width, in float height, in float blur, in float c, in float m, in float y, in float k, in float a);

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Methods
arc() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
arcTo() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
beginPath() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
bezierCurveTo() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
clearRect() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
clip() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
closePath() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createImageData() {{ CompatUnknown() }} 3.5 (1.9.1) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createLinearGradient() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createPattern() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createRadialGradient() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawImage() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawCustomFocusRing() {{ CompatUnknown() }} {{ unimplemented_inline("540456") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawSystemFocusRing() {{ CompatUnknown() }} {{ unimplemented_inline("540456") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fill() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fillRect() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fillText() {{ CompatUnknown() }} 3.5 (1.9.1) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
getImageData() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
isPointInPath() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
isPointInStroke()
{{ CompatUnknown() }} 19.0 (19.0) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
lineTo() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
measureText() {{ CompatUnknown() }} 3.5 (1.9.1) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
moveTo() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
putImageData() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
quadraticCurveTo() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
rect() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
restore() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
rotate() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
save() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scale() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scrollPathIntoView() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
setTransform() {{ CompatUnknown() }} 3.0 (1.9.0) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
stroke() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
strokeRect() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
strokeText() {{ CompatUnknown() }} 3.5 (1.9.1) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
transform() {{ CompatUnknown() }} 3.0 (1.9.0) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
translate() {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Attributes
canvas {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
fillstyle {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
font {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
globalAlpha {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
globalCompositeOperation {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
lineCap {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
lineJoin {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
lineWidth {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
miterLimit {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
shadowBlur {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
shadowColor {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
shadowOffsetX {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
shadowOffsetY {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
strokeStyle {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
textAlign {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
textBaseline {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Methods
arc() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
arcTo() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
beginPath() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
bezierCurveTo() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
clearRect() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
clip() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
closePath() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createImageData() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createLinearGradient() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createPattern() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
createRadialGradient() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawImage() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawCustomFocusRing() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
drawSystemFocusRing() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fill() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fillRect() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fillText() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
getImageData() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
isPointInPath() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
isPointInStroke() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
lineTo() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
measureText() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
moveTo() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
putImageData() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
quadraticCurveTo() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
rect() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
restore() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
rotate() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
save() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scale() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scrollPathIntoView() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
setTransform() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
stroke() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
strokeRect() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
strokeText() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
transform() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
translate() {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Attributes
canvas {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fillstyle {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
font {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
globalAlpha {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
globalCompositeOperation {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
lineCap {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
lineJoin {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
lineWidth {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
miterLimit {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
shadowBlur {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
shadowColor {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
shadowOffsetX {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
shadowOffsetY {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
strokeStyle {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
textAlign {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
textBaseline {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

Gecko

{{ IFSummary("dom/interfaces/canvas/nsIDOMCanvasRenderingContext2D.idl", "nsISupports", "Scriptable", "7.0", "", "1.8") }}

{{ gecko_callout_heading("2.0") }}

Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, the following corrections were made to various behaviors, in order to improve compliance with the HTML5 specification:

  • Specifying a negative radius when calling arc() now correctly throws an INDEX_SIZE_ERR exception.
  • Specifying non-finite values when calling createLinearGradient() and createRadialGradient() now throws NOT_SUPPORTED_ERR instead of SYNTAX_ERR.
  • Setting miterLimit to a negative value no longer throws an exception; instead, it properly ignores non-positive values.
  • Setting lineWidth to a negative value no longer throws an exception; instead, it properly ignores non-positive values.

{{ gecko_callout_heading("5.0") }}

Starting in Gecko 5.0 {{ geckoRelease("5.0") }}, the following corrections were made to various behaviors, in order to improve compliance with the HTML5 specification:

  • getImageData() now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.
  • drawImage() and createImageData() now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.
  • Specifying non-finite values when calling createImageData() now properly throws a NOT_SUPPORTED_ERR exception.
  • createImageData() and getImageData() now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
  • Specifying a negative radius when calling createRadialGradient() now correctly throws INDEX_SIZE_ERR.
  • Specifying a null or undefined image when calling createPattern() or drawImage() now correctly throws a TYPE_MISMATCH_ERR exception.
  • Specifying invalid values for globalAlpha no longer throws a SYNTAX_ERR exception; these are now correctly silently ignored.
  • Specifying invalid values when calling translate(), transform(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), or arc() no longer throws an exception; these calls are now correctly silently ignored.
  • Setting the value of shadowOffsetX, shadowOffsetY, or shadowBlur to an invalid value is now silently ignored.
  • Setting the value of rotate or scale to an invalid value is now silently ignored.

Specification

Revision Source

<p>The 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. To get this object, call <code>getContext()</code> on a <code>&lt;canvas&gt;</code>, supplying "2d" as the argument:</p>
<pre>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</pre>
<p>Once you have the 2D rendering context for a canvas, you can draw within it. For example:</p>
<pre>
ctx.fillStyle = "rgb(200,0,0)";  
ctx.fillRect(10, 10, 55, 50);  
</pre>
<p>See the <a href="/en/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a> for more information, examples, and resources.</p>
<h2 id="Method_overview">Method overview</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="#arc()">arc</a>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#arcTo()">arcTo</a>(in float x1, in float y1, in float x2, in float y2, in float radius);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#beginPath()">beginPath</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#bezierCurveTo()">bezierCurveTo</a>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#clearRect()">clearRect</a>(in float x, in float y, in float width, in float height);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#clip()">clip</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#closePath()">closePath</a>();</code></td>
    </tr>
    <tr>
      <td><code>ImageData <a href="#createImageData()">createImageData</a>(in float width, in float height);</code><br />
        <code>ImageData <a href="#createImageData()">createImageData</a>(Imagedata imagedata);</code></td>
    </tr>
    <tr>
      <td><code>nsIDOMCanvasGradient <a href="#createLinearGradient()">createLinearGradient</a>(in float x0, in float y0, in float x1, in float y1);</code></td>
    </tr>
    <tr>
      <td><code>nsIDOMCanvasPattern <a href="#createPattern()">createPattern</a>(in nsIDOMHTMLElement image, in DOMString repetition);</code></td>
    </tr>
    <tr>
      <td><code>nsIDOMCanvasGradient <a href="#createRadialGradient()">createRadialGradient</a>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#drawImage()">drawImage</a>(in nsIDOMElement image, in float a1, in float a2, in float a3 {{ optional_inline() }}, in float a4 {{ optional_inline() }}, in float a5 {{ optional_inline() }}, in float a6 {{ optional_inline() }}, in float a7 {{ optional_inline() }}, in float a8 {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>boolean <a href="#drawCustomFocusRing()">drawCustomFocusRing</a>(Element element);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#drawSystemFocusRing()">drawSystemFocusRing</a>(Element element);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#fill()">fill</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#fillRect()">fillRect</a>(in float x, in float y, in float width, in float height);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#fillText()">fillText</a>(in DOMString text, in float x, in float y, in float maxWidth {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>ImageData <a href="#getImageData()">getImageData</a>(in float x, in float y, in float width, in float height);</code></td>
    </tr>
    <tr>
      <td><code>sequence &lt;unrestricted double&gt; <a href="#getLineDash()">getLineDash</a>()</code></td>
    </tr>
    <tr>
      <td><code>boolean <a href="#isPointInPath()">isPointInPath</a>(in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>boolean <a href="#isPointInStroke()">isPointInStroke</a>(in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#lineTo()">lineTo</a>(in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>nsIDOMTextMetrics <a href="#measureText()">measureText</a>(in DOMString text);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#moveTo()">moveTo</a>(in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#putImageData()">putImageData</a>(in ImageData imagedata, in float dx, double dy, in float dirtyX {{ optional_inline() }}, in float dirtyY {{ optional_inline() }}, in float dirtyWidth {{ optional_inline() }}, in float dirtyHeight {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#quadraticCurveTo()">quadraticCurveTo</a>(in float cpx, in float cpy, in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#rect()">rect</a>(in float x, in float y, in float width, in float height);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#restore()">restore</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#rotate()">rotate</a>(in float angle);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#save()">save</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#scale()">scale</a>(in float x, in float y);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#scrollPathIntoView()">scrollPathIntoView</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setLineDash()">setLineDash</a>(in sequence &lt;unrestricted double&gt; segments);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setTransform()">setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#stroke()">stroke</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#strokeRect()">strokeRect</a>(in float x, in float y, in float w, in float h);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#strokeText()">strokeText</a>(in DOMString text, in float x, in float y, in float maxWidth {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#transform()">transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#translate()">translate</a>(in float x, in float y);</code></td>
    </tr>
  </tbody>
</table>
<h3 id="Gecko-specific_Method_overview">Gecko-specific Method overview</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="#asyncDrawXULElement()">asyncDrawXULElement</a>(in nsIDOMXULElement elem, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags {{ optional_inline() }});</code> {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#drawWindow()">drawWindow</a>(in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#getFillStyle_multi()">getFillStyle_multi</a>(out DOMString str, out nsISupports iface, out long type);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#getImageData_explicit()">getImageData_explicit</a>(in long x, in long y, in unsigned long width, in unsigned long height, [array, size_is(dataLen)] in octet dataPtr, in unsigned long dataLen);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#getStrokeStyle_multi()">getStrokeStyle_multi</a>(out DOMString str, out nsISupports iface, out long type);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#mozDrawText()">mozDrawText</a>(in DOMString textToDraw);</code> {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)</td>
    </tr>
    <tr>
      <td><code>float <a href="#mozMeasureText()">mozMeasureText</a>(in DOMString textToMeasure);</code> {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)</td>
    </tr>
    <tr>
      <td><code>void <a href="#mozPathText()">mozPathText</a>(in DOMString textToPath);</code> {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)</td>
    </tr>
    <tr>
      <td><code>void <a href="#mozTextAlongPath()">mozTextAlongPath</a>(in DOMString textToDraw, in boolean stroke);</code> {{ gecko_minversion_inline("1.9") }} (unimplemented since Gecko 7.0)</td>
    </tr>
    <tr>
      <td><code>void <a href="#putImageData_explicit()">putImageData_explicit</a>(in long x, in long y, in unsigned long width, in unsigned long height, [array, size_is(dataLen)] in octet dataPtr, in unsigned long dataLen, in boolean hasDirtyRect, in long dirtyX, in long dirtyY, in long dirtyWidth, in long dirtyHeight);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#setFillStyle_multi()">setFillStyle_multi</a>(in DOMString str, in nsISupports iface);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>void <a href="#setStrokeStyle_multi()">setStrokeStyle_multi</a>(in DOMString str, in nsISupports iface);</code> {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
  </tbody>
</table>
<h3 id="WebKit-specific_Method_overview">WebKit-specific Method overview</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="#clearShadow()">clearShadow</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#drawImageFromRect()">drawImageFromRect</a>(in HTMLImageElement image, in float sx {{ optional_inline() }}, in float sy {{ optional_inline() }}, in float sw {{ optional_inline() }}, in float sh {{ optional_inline() }}, in float dx {{ optional_inline() }}, in float dy {{ optional_inline() }}, in float dw {{ optional_inline() }}, in float dh {{ optional_inline() }}, in DOMString compositeOperation {{ optional_inline() }});</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setAlpha()">setAlpha</a>();</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setCompositeOperation()">setCompositeOperation</a>(in DOMString compositeOperation);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setLineWidth()">setLineWidth</a>(in float width);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setLineCap()">setLineCap</a>(in DOMString cap);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setLineJoin()">setLineJoin</a>(in DOMString join);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setMiterLimit()">setMiterLimit</a>(in float limit);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setStrokeColor()">setStrokeColor</a>(in DOMString color, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setStrokeColor()">setStrokeColor</a>(in float grayLevel, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setStrokeColor()">setStrokeColor</a>(in float r, in float g, in float b, in float a);</code><br />
        <code>void <a href="#setStrokeColor()">setStrokeColor</a>(in float c, in float m, in float y, in float k, in float a);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setFillColor()">setFillColor</a>(in DOMString color, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setFillColor()">setFillColor</a>(in float grayLevel, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setFillColor()">setFillColor</a>(in float r, in float g, in float b, in float a);</code><br />
        <code>void <a href="#setFillColor()">setFillColor</a>(in float c, in float m, in float y, in float k, in float a);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="#setShadow()">setShadow</a>(in float width, in float height, in float blur, in DOMString color {{ optional_inline() }}, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setShadow()">setShadow</a>(in float width, in float height, in float blur, in float grayLevel, in float alpha {{ optional_inline() }});</code><br />
        <code>void <a href="#setShadow()">setShadow</a>(in float width, in float height, in float blur, in float r, in float g, in float b, in float a);</code><br />
        <code>void <a href="#setShadow()">setShadow</a>(in float width, in float height, in float blur, in float c, in float m, in float y, in float k, in float a);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Attribute</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>canvas</code></td>
      <td><code>{{ Interface("nsIDOMHTMLCanvasElement") }}</code></td>
      <td>Back-reference to the canvas element for which this context was created. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>fillStyle</code></td>
      <td><code>{{ Interface("nsIVariant") }}</code></td>
      <td>Color or style to use inside shapes. Default <code>#000</code> (black).</td>
    </tr>
    <tr>
      <td><code>font</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Default value <code>10px sans-serif</code>.</td>
    </tr>
    <tr>
      <td><code>globalAlpha</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</td>
    </tr>
    <tr>
      <td><code>globalCompositeOperation</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap. Possible values:
        <ul>
          <li><code>source-atop</code></li>
          <li><code>source-in</code></li>
          <li><code>source-out</code></li>
          <li><code>source-over</code> (default)</li>
          <li><code>destination-atop</code></li>
          <li><code>destination-in</code></li>
          <li><code>destination-out</code></li>
          <li><code>destination-over</code></li>
          <li><code>lighter</code></li>
          <li><code>darker</code></li>
          <li><code>copy</code></li>
          <li><code>xor</code></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>lineCap</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code></td>
    </tr>
    <tr>
      <td><code>lineDashOffset</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Specifies where to start a dasharray on a line.</td>
    </tr>
    <tr>
      <td><code>lineJoin</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default)</td>
    </tr>
    <tr>
      <td><code>lineWidth</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Width of lines. Default <code>1.0</code></td>
    </tr>
    <tr>
      <td><code>miterLimit</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Default <code>10</code>.</td>
    </tr>
    <tr>
      <td><code>shadowBlur</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Specifies the blurring effect. Default <code>0</code></td>
    </tr>
    <tr>
      <td><code>shadowColor</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Color of the shadow. Default fully-transparent black.</td>
    </tr>
    <tr>
      <td><code>shadowOffsetX</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Horizontal distance the shadow will be offset. Default 0.</td>
    </tr>
    <tr>
      <td><code>shadowOffsetY</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Vertical distance the shadow will be offset. Default 0.</td>
    </tr>
    <tr>
      <td><code>strokeStyle</code></td>
      <td><code>{{ Interface("nsIVariant") }}</code></td>
      <td>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</td>
    </tr>
    <tr>
      <td><code>textAlign</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</td>
    </tr>
    <tr>
      <td><code>textBaseline</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code></td>
    </tr>
  </tbody>
</table>
<h3 id="Gecko-specific_attributes">Gecko-specific attributes</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Attribute</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>mozCurrentTransform</code></td>
      <td><code>jsval</code></td>
      <td>Sets or gets the current transformation matrix. {{ gecko_minversion_inline("7.0") }}</td>
    </tr>
    <tr>
      <td><code>mozCurrentTransformInverse</code></td>
      <td><code>jsval</code></td>
      <td>Set or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</td>
    </tr>
    <tr>
      <td><code>mozDash</code></td>
      <td><code>array of float</code></td>
      <td>An array which specifies the lengths of alternating dashes and gaps. {{ gecko_minversion_inline("7.0") }} (see {{ bug("740284") }} for implementing the HTML5 spec version / unprefixing)</td>
    </tr>
    <tr>
      <td><code>mozDashOffset</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Specifies where to start a dasharray on a line. {{ gecko_minversion_inline("7.0") }} (see {{ bug("740284") }} for implementing the HTML5 spec version / unprefixing)</td>
    </tr>
    <tr>
      <td><code>mozFillRule</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</td>
    </tr>
    <tr>
      <td><code>mozImageSmoothingEnabled</code></td>
      <td><code><a href="/en/boolean" title="en/boolean">boolean</a></code></td>
      <td>Image smoothing mode; if disabled, images will not be smoothed if scaled. {{ gecko_minversion_inline("1.9.2") }}</td>
    </tr>
    <tr>
      <td><code>mozTextStyle</code></td>
      <td><code>{{ domxref("DOMString") }}</code></td>
      <td>{{ gecko_minversion_inline("1.9") }} {{ deprecated_inline() }} Deprecated in favor of the HTML5 <code>font</code> attribute described above.</td>
    </tr>
  </tbody>
</table>
<h3 id="WebKit-specific_attributes">WebKit-specific attributes</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Attribute</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>webkitLineDash</code></td>
      <td><code>array of float</code></td>
      <td>An array which specifies the lengths of alternating dashes and gaps. (expected to be unprefixed / updated to HTML5 spec as per {{ webkitbug("80674") }})</td>
    </tr>
    <tr>
      <td><code>webkitLineDashOffset</code></td>
      <td><code><a href="/en/float" title="en/float">float</a></code></td>
      <td>Specifies where to start a dasharray on a line. (expected to be unprefixed / updated to HTML5 spec as per {{ webkitbug("80674") }})</td>
    </tr>
  </tbody>
</table>
<h2 id="Constants">Constants</h2>
<h3 id="Gecko-specific_constants">Gecko-specific constants</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Constant</td>
      <td class="header">Value</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>DRAWWINDOW_DRAW_CARET</code></td>
      <td><code>0x01</code></td>
      <td>Show the caret if appropriate when drawing. {{ gecko_minversion_inline("1.9.1") }}</td>
    </tr>
    <tr>
      <td><code>DRAWWINDOW_DO_NOT_FLUSH</code></td>
      <td><code>0x02</code></td>
      <td>Do not flush pending layout notifications that could otherwise be batched up. {{ gecko_minversion_inline("1.9.1") }}</td>
    </tr>
    <tr>
      <td><code>DRAWWINDOW_DRAW_VIEW</code></td>
      <td><code>0x04</code></td>
      <td>Draw scrollbars and scroll the viewport if they are present. {{ gecko_minversion_inline("1.9.2") }}</td>
    </tr>
    <tr>
      <td><code>DRAWWINDOW_USE_WIDGET_LAYERS</code></td>
      <td><code>0x08</code></td>
      <td>Use the widget layer manager if available. This means hardware acceleration may be used, but it might actually be slower or lower quality than normal. It will however more accurately reflect the pixels rendered to the screen. {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
    <tr>
      <td><code>DRAWWINDOW_ASYNC_DECODE_IMAGES</code></td>
      <td><code>0x10</code></td>
      <td>Do not synchronously decode images - draw what we have. {{ gecko_minversion_inline("2.0") }}</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<h3 id="arc()">arc()</h3>
<p>Adds an arc to the path which it center is at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</p>
<pre class="eval">
void arc(
  in float x,
  in float y,
  in float radius,
  in float startAngle,
  in float endAngle,
  in boolean anticlockwise [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis of the coordinate for the arc's center</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis of the coordinate for the arc's center.</dd>
  <dt>
    <code>radius</code></dt>
  <dd>
    The arc's radius</dd>
  <dt>
    <code>startAngle</code></dt>
  <dd>
    The starting point, measured from the x axis , from which it will be drawed expressed as radians.</dd>
  <dt>
    <code>endAngle</code></dt>
  <dd>
    The end arc's angle to which it will be drawed expressed as radians.</dd>
  <dt>
    <code>anticlockwise</code> {{ optional_inline("2.0") }}</dt>
  <dd>
    When <code>true</code> draws the arc anticlockwise, otherwise in a clockwise direction.</dd>
</dl>
<h3 id="arcTo()">arcTo()</h3>
<p>Adds an arc with the given control points and radius, connected to the previous point by a straight line.</p>
<pre class="eval">
void arcTo(
  in float x1,
  in float y1,
  in float x2,
  in float y2,
  in float radius
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x1</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y1</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x2</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y2</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>radius</code></dt>
  <dd>
    The arc's radius.</dd>
</dl>
<h3 id="beginPath()">beginPath()</h3>
<p>Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path.</p>
<pre class="eval">
void beginPath();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="bezierCurveTo()">bezierCurveTo()</h3>
<pre class="eval">
void bezierCurveTo(
  in float cp1x,
  in float cp1y,
  in float cp2x,
  in float cp2y,
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>cp1x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>cp1y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>cp2x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>cp2y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="clearRect()">clearRect()</h3>
<p>Clears the rectangle defined by it starting point at <em>(x, y)</em> and has a <em>w</em> width and a <em>h</em> height.</p>
<pre class="eval">
void clearRect(
  in float x,
  in float y,
  in float width,
  in float height
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis of the coordinate for the rectangle starting point.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis of the coordinate for the rectangle starting point.</dd>
  <dt>
    <code>width</code></dt>
  <dd>
    The rectangle's width.</dd>
  <dt>
    <code>height</code></dt>
  <dd>
    The rectangle's height.</dd>
</dl>
<h3 id="clip()">clip()</h3>
<p>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en/Canvas_tutorial/Compositing#Clipping_paths" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</p>
<pre class="eval">
void clip();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="closePath()">closePath()</h3>
<p>Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</p>
<pre class="eval">
void closePath();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="createImageData()">createImageData()</h3>
<p>Creates a new, blank {{ domxref("ImageData") }} object with the specified dimensions. All of the pixels in the new object are transparent black.</p>
<pre class="eval">
ImageData createImageData(
&nbsp;&nbsp;in float width,
&nbsp;&nbsp;in float height
);
ImageData createImageData(
&nbsp;&nbsp;ImageData imagedata
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>width</code></dt>
  <dd>
    The width to give the new {{ domxref("ImageData") }} object.</dd>
  <dt>
    <code>height</code></dt>
  <dd>
    The height to give the new {{ domxref("ImageData") }} object.</dd>
  <dt>
    <code>imagedata</code></dt>
  <dd>
    An existing {{ domxref("ImageData") }} object from which to copy the width and height. The image itself is <strong>not</strong> copied.</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p>A new {{ domxref("ImageData") }} object with the specified width and height. The new object is filled with transparent black pixels.</p>
<h3 id="createLinearGradient()">createLinearGradient()</h3>
<pre class="eval">
nsIDOMCanvasGradient createLinearGradient(
  in float x0,
  in float y0,
  in float x1,
  in float y1
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x0</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y0</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x1</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y1</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>nsIDOMCanvasGradient</code></p>
<h3 id="createPattern()">createPattern()</h3>
<pre class="eval">
nsIDOMCanvasPattern createPattern(
  in nsIDOMHTMLElement image,
  in DOMString repetition
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>image</code></dt>
  <dd>
    A DOM {{ domxref("element") }} to use as the source image for the pattern. This can be any element, although typically you'll use an {{ domxref("Image") }} or {{ HTMLElement("canvas") }}.</dd>
  <dt>
    <code>repetition</code></dt>
  <dd>
    ?</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p>A new DOM canvas pattern object for use in pattern-based operations.</p>
<h6 id="Exceptions_thrown">Exceptions thrown</h6>
<dl>
  <dt>
    <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> {{ gecko_minversion_inline("10.0") }}</dt>
  <dd>
    The specified {{ HTMLElement("canvas") }} element for the <code>image</code> parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).</dd>
</dl>
<h3 id="createRadialGradient()">createRadialGradient()</h3>
<pre class="eval">
nsIDOMCanvasGradient createRadialGradient(
  in float x0,
  in float y0,
  in float r0,
  in float x1,
  in float y1,
  in float r1
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x0</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y0</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>r0</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x1</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y1</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>r1</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>nsIDOMCanvasGradient</code></p>
<h3 id="drawCustomFocusRing()">drawCustomFocusRing()</h3>
<pre class="eval">
boolean drawCustomFocusRing(Element element);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>element</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>boolean</code></p>
<h3 id="drawImage()">drawImage()</h3>
<p>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</p>
<pre class="eval">
void drawImage(
  in nsIDOMElement image,
  in float dx,
  in float dy
);

void drawImage(
  in nsIDOMElement image,
  in float dx,
  in float dy,
  in float dw,
  in float dh
);

void drawImage(
  in nsIDOMElement image,
  in float sx,
  in float sy,
  in float sw,
  in float sh,
  in float dx, 
  in float dy,
  in float dw,
  in float dh
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>image</code></dt>
  <dd>
    An element to draw into the context; the specification permits any image element (that is, {{ HTMLElement("img") }}, {{ HTMLElement("canvas") }}, and {{ HTMLElement("video") }}). Some browsers, including Firefox, let you use any arbitrary element.</dd>
  <dt>
    <code>dx</code></dt>
  <dd>
    The X coordinate in the destination canvas at which to place the top-left corner of the source <code>image</code>.</dd>
  <dt>
    <code>dy</code></dt>
  <dd>
    The Y coordinate in the destination canvas at which to place the top-left corner of the source <code>image</code>.</dd>
  <dt>
    <code>dw</code></dt>
  <dd>
    The width to draw the <code>image</code> in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.</dd>
  <dt>
    <code>dh</code></dt>
  <dd>
    The height to draw the <code>image</code> in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.</dd>
  <dt>
    <code>sx</code></dt>
  <dd>
    The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.</dd>
  <dt>
    <code>sy</code></dt>
  <dd>
    The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.</dd>
  <dt>
    <code>sw</code></dt>
  <dd>
    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 <code>sx</code> and <code>sy</code> to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.</dd>
  <dt>
    <code>sh</code></dt>
  <dd>
    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.</dd>
</dl>
<p>The diagram below illustrates the meanings of the various parameters.</p>
<p><img alt="drawImage.png" class="internal default" src="/@api/deki/files/5494/=drawImage.png" /></p>
<h6 id="Exceptions_thrown">Exceptions thrown</h6>
<dl>
  <dt>
    <code>INDEX_SIZE_ERR</code></dt>
  <dd>
    If the canvas or source rectangle width or height is zero.</dd>
  <dt>
    <code>INVALID_STATE_ERR</code></dt>
  <dd>
    The image has no image data.</dd>
  <dt>
    <code>TYPE_MISMATCH_ERR</code></dt>
  <dd>
    The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.</dd>
</dl>
<h6 id="Compatibility_notes">Compatibility notes</h6>
<ul>
  <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.</li>
  <li>Support for flipping the image by using negative values for <code>sw</code> and <code>sh</code> was added in Gecko 5.0 {{ geckoRelease("5.0") }}.</li>
  <li>Gecko 9.0 {{ geckoRelease("9.0") }} now correctly supports CORS for drawing images across domains without <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">tainting the canvas</a>.</li>
  <li>Gecko 11.0 {{ geckoRelease("11.0") }} now allows SVG-as-an-image to be drawn into a canvas without <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">tainting the canvas</a>.</li>
</ul>
<h3 id="drawSystemFocusRing()">drawSystemFocusRing()</h3>
<pre class="eval">
void drawSystemFocusRing(Element element);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>element</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="fill()">fill()</h3>
<p>Fills the subpaths with the current fill style.</p>
<pre class="eval">
void fill();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="fillRect()">fillRect()</h3>
<p>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</p>
<pre class="eval">
void fillRect(
  in float x,
  in float y,
  in float width,
  in float height
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis of the coordinate for the rectangle starting point.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis of the coordinate for the rectangle starting point.</dd>
  <dt>
    <code>width</code></dt>
  <dd>
    The rectangle's width.</dd>
  <dt>
    <code>height</code></dt>
  <dd>
    The rectangle's height.</dd>
</dl>
<h3 id="fillText()">fillText()</h3>
<pre class="eval">
void fillText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>text</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>maxWidth</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="getImageData()">getImageData()</h3>
<p>Returns an <code><a class="external" href="http://dev.w3.org/html5/2dcontext/Overview.html#imagedata">ImageData</a></code> object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has a <em>sw</em> width and <em>sh</em> height.</p>
<pre class="eval">
void getImageData(   
  in double sx, 
  in double sy, 
  in double sw, 
  in double sh
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>sx</code></dt>
  <dd>
    The x axis of the coordinate for the rectangle startpoint from which the ImageData will be extracted.</dd>
  <dt>
    <code>sy</code></dt>
  <dd>
    The x axis of the coordinate for the rectangle endpoint from which the ImageData will be extracted.</dd>
  <dt>
    <code>sw</code></dt>
  <dd>
    The width of the rectangle from which the ImageData will be extracted.</dd>
  <dt>
    <code>sh</code></dt>
  <dd>
    The height of the rectangle from which the ImageData will be extracted.</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p>Returns an <code><a class="external" href="http://www.w3.org/TR/2011/WD-2dcontext-20110405/#imagedata">ImageData</a></code> object containing the image data for the given rectangle of the canvas.</p>
<h3 id="getLineDash()">getLineDash()</h3>
<p>Returns an dash list array containing an even number of non-negative numbers.</p>
<pre class="eval">
sequence getLineDash(   
);
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h6 id="Return_value">Return value</h6>
<p>Returns an dash list array containing an even number of non-negative numbers.</p>
<h3 id="isPointInPath()">isPointInPath()</h3>
<p>Reports whether or not the specified point is contained in the current path.</p>
<pre class="eval">
boolean isPointInPath(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The X coordinate of the point to check.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The Y coordinate of the point to check.</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>true</code> if the specified point is contained in the current path; otherwise <code>false</code>.</p>
<h6 id="Compatibility_notes">Compatibility notes</h6>
<ul>
  <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, 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.</li>
</ul>
<h3 id="isPointInStroke()">isPointInStroke()</h3>
<p>Reports whether or not the specified point is inside the area contained by the stroking of a path.</p>
<pre class="eval">
boolean isPointInStroke(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The X coordinate of the point to check.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The Y coordinate of the point to check.</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>true</code> if the point is inside the area contained by the stroking of a path; otherwise <code>false</code>.</p>
<h3 id="lineTo()">lineTo()</h3>
<p>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</p>
<pre class="eval">
void lineTo(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis of the coordinate for the end of the line.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis of the coordinate for the end of the line.</dd>
</dl>
<h3 id="measureText()">measureText()</h3>
<pre class="eval">
nsIDOMTextMetrics measureText(
  in DOMString text
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>text</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p><code>nsIDOMTextMetrics</code></p>
<h3 id="moveTo()">moveTo()</h3>
<p>Moves the starting point of a new subpath to the <strong>(x, y)</strong> coordinates.</p>
<pre class="eval">
void moveTo(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis of the point.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis of the point.</dd>
</dl>
<h3 id="putImageData()">putImageData()</h3>
<pre class="eval">
void putImageData(
  in long x,
  in long y,
  in unsigned long width,
  in unsigned long height,
  [array, size_is(dataLen)] in octet dataPtr,
  in unsigned long dataLen,
  in boolean hasDirtyRect,
  in long dirtyX, [optional]
  in long dirtyY, [optional]
  in long dirtyWidth, [optional]
  in long dirtyHeight [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>width</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>height</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dataPtr</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dataLen</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>hasDirtyRect</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dirtyX</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dirtyY</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dirtyWidth</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dirtyHeight</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Compatibility_notes">Compatibility notes</h6>
<ul>
  <li>Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, non-finite values to any of these parameters causes the call to putImageData() to be silently ignored, rather than throwing an exception.</li>
</ul>
<h3 id="quadraticCurveTo()">quadraticCurveTo()</h3>
<pre class="eval">
void quadraticCurveTo(
  in float cpx,
  in float cpy,
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>cpx</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>cpy</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="rect()">rect()</h3>
<pre class="eval">
void rect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>w</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>h</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="restore()">restore()</h3>
<p>Restores the drawing style state to the last element on the 'state stack' saved by save()</p>
<pre class="eval">
void restore();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="rotate()">rotate()</h3>
<pre class="eval">
void rotate(
  in float angle
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>angle</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="save()">save()</h3>
<p>Saves the current drawing style state using a stack so you can revert any change you make to it using restore().</p>
<pre class="eval">
void save();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="scale()">scale()</h3>
<pre class="eval">
void scale(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="scrollPathIntoView()">scrollPathIntoView()</h3>
<pre class="eval">
void scrollPathIntoView();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="setLineDash()">setLineDash()</h3>
<pre class="eval">
void setLineDash(
  sequence segments
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>segments</code></dt>
  <dd>
    An even number of non-negative numbers specifying a dash list.</dd>
</dl>
<h3 id="setTransform()">setTransform()</h3>
<pre class="eval">
void setTransform(
  in float m11,
  in float m12,
  in float m21,
  in float m22,
  in float dx,
  in float dy
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>m11</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m12</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m21</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m22</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dx</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dy</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="stroke()">stroke()</h3>
<p>Strokes the subpaths with the current stroke style.</p>
<pre class="eval">
void stroke();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="strokeRect()">strokeRect()</h3>
<p>Paints a rectangle which it starting point is at <em>(x, y)</em> and has a<em> w</em> width and a <em>h</em> height onto the canvas, using the current stroke style.</p>
<pre class="eval">
void strokeRect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis for the starting point of the rectangle.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The y axis for the starting point of the rectangle.</dd>
  <dt>
    <code>w</code></dt>
  <dd>
    The rectangle's width.</dd>
  <dt>
    <code>h</code></dt>
  <dd>
    The rectangle's height.</dd>
</dl>
<h3 id="strokeText()">strokeText()</h3>
<pre class="eval">
void strokeText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>text</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>maxWidth</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="transform()">transform()</h3>
<pre class="eval">
void transform(
  in float m11,
  in float m12,
  in float m21,
  in float m22,
  in float dx,
  in float dy
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>m11</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m12</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m21</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>m22</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dx</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dy</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="translate()">translate()</h3>
<p>Moves the origin point of the context to (x, y).</p>
<pre class="eval">
void translate(
  in float x,
  in float y
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    The x axis for the point to be considered as the origin.</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    The x axis for the point to be considered as the origin.</dd>
</dl>
<h2 id="Gecko-specific_methods">Gecko-specific methods</h2>
<p>{{ method_gecko_minversion("asyncDrawXULElement","2.0") }}</p>
<pre class="eval">
void asyncDrawXULElement(
  in nsIDOMXULElement elem,
  in float x,
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>elem</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>w</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>h</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>bgColor</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>flags</code> {{ optional_inline() }}</dt>
  <dd>
    &nbsp;</dd>
</dl>
<h3 id="drawWindow()">drawWindow()</h3>
<p>This API cannot currently be used by Web content. It is chrome only.</p>
<p>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</p>
<p>Of course, the rendering obeys the current {{ manch("scale") }}, {{ manch("transform") }} and <code>globalAlpha</code> values.</p>
<p>Hints: -- If 'rgba(0,0,0,0)' is used for the background color, the drawing will be transparent wherever the window is transparent. -- Top-level browsed documents are usually not transparent because the user's background-color preference is applied, but IFRAMEs are transparent if the page doesn't set a background. -- If an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.</p>
<pre class="eval">
void drawWindow(
  in nsIDOMWindow window,
  in float x,
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>window</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>w</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>h</code></dt>
  <dd>
    Specify the area of the window to render, in CSS pixels.</dd>
  <dt>
    <code>bgColor</code></dt>
  <dd>
    The canvas is filled with this color before we render the window into it. This color may be transparent/translucent. It is given as a CSS color string (for example, rgb() or rgba()).</dd>
  <dt>
    <code>flags</code> {{ optional_inline() }} {{ gecko_minversion_inline("1.9.1") }}</dt>
  <dd>
    Used to better control the <code>drawWindow</code> call. Flags can be ORed together.</dd>
</dl>
<p>{{ method_noscript("getFillStyle_multi") }}</p>
<p>Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.</p>
<pre class="eval">
void getFillStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>str</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>iface</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>type</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_noscript("getImageData_explicit") }}</p>
<p>Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.</p>
<pre class="eval">
void getImageData_explicit(
  in long x,
  in long y,
  in unsigned long width,
  in unsigned long height,
  [array, size_is(dataLen)] in octet dataPtr,
  in unsigned long dataLen
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>x</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>y</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>width</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>height</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dataPtr</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>dataLen</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_noscript("getStrokeStyle_multi") }}</p>
<p>Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.</p>
<pre class="eval">
void getStrokeStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>str</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>iface</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>type</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_unimplemented("mozDrawText") }}</p>
<p>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.</p>
<pre class="eval">
void mozDrawText(
  in DOMString textToDraw
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>textToDraw</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_unimplemented("mozMeasureText") }}</p>
<p>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.</p>
<pre class="eval">
float mozMeasureText(
  in DOMString textToMeasure
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>textToMeasure</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h6 id="Return_value">Return value</h6>
<p>&nbsp;</p>
<p>{{ method_unimplemented("mozPathText") }}</p>
<p>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.</p>
<pre class="eval">
void mozPathText(
  in DOMString textToPath
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>textToPath</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_unimplemented("mozTextAlongPath") }}</p>
<p>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0.</p>
<pre class="eval">
void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>textToDraw</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>stroke</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_noscript("setFillStyle_multi") }}</p>
<p>Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.</p>
<pre class="eval">
void setFillStyle_multi(
  in DOMString str,
  in nsISupports iface
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>str</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>iface</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<p>{{ method_noscript("setStrokeStyle_multi") }}</p>
<p>Introduced in Gecko 2.0 {{ geckoRelease("2.0") }}.</p>
<pre class="eval">
void setStrokeStyle_multi(
  in DOMString str,
  in nsISupports iface
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>str</code></dt>
  <dd>
    &nbsp;</dd>
  <dt>
    <code>iface</code></dt>
  <dd>
    &nbsp;</dd>
</dl>
<h2 id="WebKit-specific_methods">WebKit-specific methods</h2>
<h3 id="clearShadow()">clearShadow()</h3>
<pre class="eval">
void clearShadow();
</pre>
<h6 id="Parameters">Parameters</h6>
<p>None.</p>
<h3 id="drawImageFromRect()">drawImageFromRect()</h3>
<pre class="eval">
void drawImageFromRect(
  in HTMLImageElement image,
  in [Optional] float sx,
  in [Optional] float sy,
  in [Optional] float sw,
  in [Optional] float sh,
  in [Optional] float dx, 
  in [Optional] float dy,
  in [Optional] float dw,
  in [Optional] float dh,
  in [Optional] DOMString compositeOperation
);
</pre>
<h3 id="setAlpha()">setAlpha()</h3>
<pre class="eval">
void setAlpha(
  in float alpha
);
</pre>
<h3 id="setCompositeOperation()">setCompositeOperation()</h3>
<pre class="eval">
void setCompositeOperation(
  in DOMString compositeOperation
);
</pre>
<h3 id="setLineWidth()">setLineWidth()</h3>
<pre class="eval">
void setLineWidth(
  in float width
);
</pre>
<h3 id="setLineCap()">setLineCap()</h3>
<pre class="eval">
void setLineCap(
  in DOMString cap
);
</pre>
<h3 id="setLineJoin()">setLineJoin()</h3>
<pre class="eval">
void setLineJoin(
  in DOMString join
);
</pre>
<h3 id="setMiterLimit()">setMiterLimit()</h3>
<pre class="eval">
void setMiterLimit(
  in float limit
);
</pre>
<h3 id="setStrokeColor()">setStrokeColor()</h3>
<pre class="eval">
void setStrokeColor(in DOMString color, in [Optional] float alpha);
void setStrokeColor(in float grayLevel, in [Optional] float alpha);
void setStrokeColor(in float r, in float g, in float b, in float a);
void setStrokeColor(in float c, in float m, in float y, in float k, in float a);
</pre>
<h3 id="setFillColor()">setFillColor()</h3>
<pre class="eval">
void setFillColor(in DOMString color, in [Optional] float alpha);
void setFillColor(in float grayLevel, in [Optional] float alpha);
void setFillColor(in float r, in float g, in float b, in float a);
void setFillColor(in float c, in float m, in float y, in float k, in float a);
</pre>
<h3 id="setShadow()">setShadow()</h3>
<pre class="eval">
void setShadow(in float width, in float height, in float blur, in [Optional] DOMString color, in [Optional] float alpha);
void setShadow(in float width, in float height, in float blur, in float grayLevel, in [Optional] float alpha);
void setShadow(in float width, in float height, in float blur, in float r, in float g, in float b, in float a);
void setShadow(in float width, in float height, in float blur, in float c, in float m, in float y, in float k, in float a);
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center; background: #eee">Methods</td>
      </tr>
      <tr>
        <td><code>arc()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>arcTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>beginPath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>bezierCurveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>clearRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>clip()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>closePath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.5 (1.9.1)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createLinearGradient()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createPattern()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createRadialGradient()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawImage()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawCustomFocusRing()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ unimplemented_inline("540456") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawSystemFocusRing()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ unimplemented_inline("540456") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fill()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.5 (1.9.1)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>getImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>isPointInPath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>
          <table class="compat-table">
            <tbody>
              <tr>
                <td><code>isPointInStroke()</code></td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>{{ CompatUnknown() }}</td>
        <td>19.0 (19.0)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>measureText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.5 (1.9.1)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>moveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>putImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>quadraticCurveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>rect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>restore()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>rotate()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>save()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>scale()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>scrollPathIntoView()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>setTransform()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.0 (1.9.0)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>stroke()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.5 (1.9.1)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>transform()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>3.0 (1.9.0)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>translate()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center; background: #eee">Attributes</td>
      </tr>
      <tr>
        <td><code>canvas</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillstyle</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>font</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>globalAlpha</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>globalCompositeOperation</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineCap</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineJoin</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineWidth</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>miterLimit</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowBlur</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowColor</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowOffsetX</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowOffsetY</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeStyle</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textAlign</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textBaseline</code></td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center; background: #eee">Methods</td>
      </tr>
      <tr>
        <td><code>arc()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>arcTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>beginPath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>bezierCurveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>clearRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>clip()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>closePath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createLinearGradient()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createPattern()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>createRadialGradient()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawImage()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawCustomFocusRing()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>drawSystemFocusRing()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fill()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>getImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>isPointInPath()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>isPointInStroke()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>measureText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>moveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>putImageData()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>quadraticCurveTo()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>rect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>restore()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>rotate()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>save()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>scale()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>scrollPathIntoView()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>setTransform()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>stroke()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeRect()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeText()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>transform()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>translate()</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center; background: #eee">Attributes</td>
      </tr>
      <tr>
        <td><code>canvas</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>fillstyle</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>font</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>globalAlpha</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>globalCompositeOperation</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineCap</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineJoin</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>lineWidth</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>miterLimit</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowBlur</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowColor</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowOffsetX</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>shadowOffsetY</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>strokeStyle</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textAlign</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>textBaseline</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Notes">Notes</h2>
<h3 id="Gecko">Gecko</h3>
<p>{{ IFSummary("dom/interfaces/canvas/nsIDOMCanvasRenderingContext2D.idl", "nsISupports", "Scriptable", "7.0", "", "1.8") }}</p>
<div class="geckoVersionNote">
  <p>{{ gecko_callout_heading("2.0") }}</p>
  <p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, the following corrections were made to various behaviors, in order to improve compliance with the HTML5 specification:</p>
  <ul>
    <li>Specifying a negative radius when calling <code>arc()</code>&nbsp;now correctly throws an <code>INDEX_SIZE_ERR</code> exception.</li>
    <li>Specifying non-finite values when calling <code>createLinearGradient()</code>&nbsp;and <code>createRadialGradient()</code> now throws <code>NOT_SUPPORTED_ERR</code> instead of <code>SYNTAX_ERR</code>.</li>
    <li>Setting <code>miterLimit</code> to a negative value no longer throws an exception; instead, it properly ignores non-positive values.</li>
    <li>Setting <code>lineWidth</code> to a negative value no longer throws an exception; instead, it properly ignores non-positive values.</li>
  </ul>
</div>
<div class="geckoVersionNote">
  <p>{{ gecko_callout_heading("5.0") }}</p>
  <p>Starting in Gecko 5.0 {{ geckoRelease("5.0") }}, the following corrections were made to various behaviors, in order to improve compliance with the HTML5 specification:</p>
  <ul>
    <li><code>getImageData()</code> now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.</li>
    <li><code>drawImage()</code>&nbsp;and <code>createImageData()</code> now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.</li>
    <li>Specifying non-finite values when calling <code>createImageData()</code> now properly throws a <code>NOT_SUPPORTED_ERR</code> exception.</li>
    <li><code>createImageData()</code>&nbsp;and <code>getImageData()</code> now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.</li>
    <li>Specifying a negative radius when calling <code>createRadialGradient()</code> now correctly throws <code>INDEX_SIZE_ERR</code>.</li>
    <li>Specifying a <code>null</code> or <code>undefined</code> image when calling <code>createPattern()</code>&nbsp;or <code>drawImage()</code> now correctly throws a <code>TYPE_MISMATCH_ERR</code> exception.</li>
    <li>Specifying invalid values for <code>globalAlpha</code> no longer throws a <code>SYNTAX_ERR</code> exception; these are now correctly silently ignored.</li>
    <li>Specifying invalid values when calling <code>translate()</code>, <code>transform()</code>, <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, or <code>arc()</code> no longer throws an exception; these calls are now correctly silently ignored.</li>
    <li>Setting the value of <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, or <code>shadowBlur</code> to an invalid value is now silently ignored.</li>
    <li>Setting the value of <code>rotate</code> or <code>scale</code> to an invalid value is now silently ignored.</li>
  </ul>
</div>
<h2 id="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d" rel="freelink">http://www.whatwg.org/specs/web-apps...eringcontext2d</a></li>
</ul>
Revert to this revision