CanvasRenderingContext2D

  • Revision slug: DOM/CanvasRenderingContext2D
  • Revision title: CanvasRenderingContext2D
  • Revision id: 18432
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment no changes

Revision Content

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

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

Method overview

void arc(in float x, in float y, in float r, 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 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 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 w, in float h);
void clip();
void closePath();
void createImageData(); {{ gecko_minversion_inline("1.9.1") }}
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);
[optional_argc] 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() }});
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 fill();
void fillRect(in float x, in float y, in float w, in float h);
void fillText(in DOMString text, in float x, in float y, in float maxWidth {{ optional_inline() }}); {{ gecko_minversion_inline("1.9.1") }}
void getFillStyle_multi(out DOMString str, out nsISupports iface, out long type); {{ noscript_inline() }} {{ gecko_minversion_inline("2.0") }}
void getImageData();
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") }}
boolean isPointInPath(in float x, in float y);
void lineTo(in float x, in float y);
nsIDOMTextMetrics measureText(in DOMString text); {{ gecko_minversion_inline("1.9.1") }}
void moveTo(in float x, in float y);
void mozDrawText(in DOMString textToDraw); {{ gecko_minversion_inline("1.9") }}
float mozMeasureText(in DOMString textToMeasure); {{ gecko_minversion_inline("1.9") }}
void mozPathText(in DOMString textToPath); {{ gecko_minversion_inline("1.9") }}
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke); {{ gecko_minversion_inline("1.9") }}
void putImageData();
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 quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void rect(in float x, in float y, in float w, in float h);
void restore();
void rotate(in float angle);
void save();
void scale(in float x, in float y);
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") }}
void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy); {{ gecko_minversion_inline("1.9") }}
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() }}); {{ gecko_minversion_inline("1.9.1") }}
void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy); {{ gecko_minversion_inline("1.9") }}
void translate(in float x, in float y);

Attributes

Attribute Type Description
canvas {{ Interface("nsIDOMHTMLCanvasElement") }} Back-reference to the canvas element for which this context was created. Read only.
fillStyle {{ Interface("nsIVariant") }}  
font {{ domxref("DOMString") }} Default "10px sans-serif". {{ gecko_minversion_inline("1.9.1") }}
globalAlpha float Default 1.0 -- opaque.
globalCompositeOperation {{ domxref("DOMString") }} Default "over".
lineCap {{ domxref("DOMString") }} "butt", "round", "square" (default)
lineJoin {{ domxref("DOMString") }} "round", "bevel", "miter" (default)
lineWidth float Default 1.
miterLimit float Default 10.
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") }}
shadowBlur float  
shadowColor {{ domxref("DOMString") }}  
shadowOffsetX float  
shadowOffsetY float  
strokeStyle {{ Interface("nsIVariant") }}  

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

void arc(
  in float x,
  in float y,
  in float r,
  in float startAngle,
  in float endAngle,
  in boolean anticlockwise {{ optional_inline("2.0") }}
);
Parameters
x
y
r
startAngle
endAngle
anticlockwise {{ optional_inline() }}

arcTo()

void arcTo(
  in float x1,
  in float y1,
  in float x2,
  in float y2,
  in float radius
);
Parameters
x1
y1
x2
y2
radius

{{ 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_inline() }}
);
Parameters
elem
x
y
w
h
bgColor
flags {{ optional_inline() }}

beginPath()

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

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

clip()

void clip();
Parameters

None.

closePath()

void closePath();
Parameters

None.

{{ method_gecko_minversion("createImageData","1.9.1") }}

void createImageData();
Parameters

None.

createLinearGradient()

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

 

createPattern()

nsIDOMCanvasPattern createPattern(
  in nsIDOMHTMLElement image,
  in DOMString repetition
);
Parameters
image
repetition
Return value

 

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

 

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

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 sw,
  in float sh
);

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 sw,
  in float sh
);
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. As per the specification, this no longer happens.

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_inline() }} {{ gecko_minversion_inline("1.9.1") }}
);
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.

fill()

void fill();
Parameters

None.

fillRect()

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

{{ method_gecko_minversion("fillText","1.9.1") }}

void fillText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth {{ optional_inline() }}
);
Parameters
text
x
y
maxWidth {{ optional_inline() }}

{{ method_noscript("getFillStyle_multi") }}

{{ gecko_minversion_header("2.0") }}

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

getImageData()

void getImageData();
Parameters

None.

{{ method_noscript("getImageData_explicit") }}

{{ gecko_minversion_header("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") }}

{{ gecko_minversion_header("2.0") }}

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

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.

lineTo()

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

{{ method_gecko_minversion("measureText","1.9.1") }}

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

 

moveTo()

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

{{ method_gecko_minversion("mozDrawText","1.9") }}

void mozDrawText(
  in DOMString textToDraw
);
Parameters
textToDraw

{{ method_gecko_minversion("mozMeasureText","1.9") }}

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

 

{{ method_gecko_minversion("mozPathText","1.9") }}

void mozPathText(
  in DOMString textToPath
);
Parameters
textToPath

{{ method_gecko_minversion("mozTextAlongPath","1.9") }}

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

putImageData()

void putImageData();
Parameters

None.

{{ method_noscript("putImageData_explicit") }}

{{ gecko_minversion_header("2.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
);
Parameters
x
y
width
height
dataPtr
dataLen
hasDirtyRect
dirtyX
dirtyY
dirtyWidth
dirtyHeight

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

void restore();
Parameters

None.

rotate()

void rotate(
  in float angle
);
Parameters
angle

save()

void save();
Parameters

None.

scale()

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

{{ method_noscript("setFillStyle_multi") }}

{{ gecko_minversion_header("2.0") }}

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

{{ method_noscript("setStrokeStyle_multi") }}

{{ gecko_minversion_header("2.0") }}

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

{{ method_gecko_minversion("setTransform","1.9") }}

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

void stroke();
Parameters

None.

strokeRect()

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

{{ method_gecko_minversion("strokeText","1.9.1") }}

void strokeText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth {{ optional_inline() }}
);
Parameters
text
x
y
maxWidth {{ optional_inline() }}

{{ method_gecko_minversion("transform","1.9") }}

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

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

Notes

These notes need to go into the compatibility section's Gecko notes block once that table is in place.

{{ 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. We need an article about CSS sizing and how this works.
  • 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>{{ IFSummary("dom/interfaces/canvas/nsIDOMCanvasRenderingContext2D.idl", "nsISupports", "Scriptable", "2.0", "", "1.8") }}</p>
<p>The bulk of the operations available at present with {{ HTMLElement("canvas") }} are available through this interface, returned by a call to <code>getContext()</code> on the {{ HTMLElement("canvas") }} element, with "2d" as its argument.</p>
<h2 name="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 r, 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="#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="#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 w, in float h);</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>void <a href="#createImageData()">createImageData</a>();</code> {{ gecko_minversion_inline("1.9.1") }}</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>[optional_argc] 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>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="#fill()">fill</a>();</code></td> </tr> <tr> <td><code>void <a href="#fillRect()">fillRect</a>(in float x, in float y, in float w, in float h);</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> {{ gecko_minversion_inline("1.9.1") }}</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()">getImageData</a>();</code></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>boolean <a href="#isPointInPath()">isPointInPath</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> {{ gecko_minversion_inline("1.9.1") }}</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="#mozDrawText()">mozDrawText</a>(in DOMString textToDraw);</code> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td><code>float <a href="#mozMeasureText()">mozMeasureText</a>(in DOMString textToMeasure);</code> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td><code>void <a href="#mozPathText()">mozPathText</a>(in DOMString textToPath);</code> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td><code>void <a href="#mozTextAlongPath()">mozTextAlongPath</a>(in DOMString textToDraw, in boolean stroke);</code> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td><code>void <a href="#putImageData()">putImageData</a>();</code></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="#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 w, in float h);</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="#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> <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> {{ gecko_minversion_inline("1.9") }}</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> {{ gecko_minversion_inline("1.9.1") }}</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> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td><code>void <a href="#translate()">translate</a>(in float x, in float y);</code></td> </tr> </tbody>
</table>
<h2 name="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> </td> </tr> <tr> <td><code>font</code></td> <td><code>{{ domxref("DOMString") }}</code></td> <td>Default "10px sans-serif". {{ gecko_minversion_inline("1.9.1") }}</td> </tr> <tr> <td><code>globalAlpha</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td>Default 1.0 -- opaque.</td> </tr> <tr> <td><code>globalCompositeOperation</code></td> <td><code>{{ domxref("DOMString") }}</code></td> <td>Default "over".</td> </tr> <tr> <td><code>lineCap</code></td> <td><code>{{ domxref("DOMString") }}</code></td> <td>"butt", "round", "square" (default)</td> </tr> <tr> <td><code>lineJoin</code></td> <td><code>{{ domxref("DOMString") }}</code></td> <td>"round", "bevel", "miter" (default)</td> </tr> <tr> <td><code>lineWidth</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td>Default 1.</td> </tr> <tr> <td><code>miterLimit</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td>Default 10.</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") }}</td> </tr> <tr> <td><code>shadowBlur</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td> </td> </tr> <tr> <td><code>shadowColor</code></td> <td><code>{{ domxref("DOMString") }}</code></td> <td> </td> </tr> <tr> <td><code>shadowOffsetX</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td> </td> </tr> <tr> <td><code>shadowOffsetY</code></td> <td><code><a href="/en/float" title="en/float">float</a></code></td> <td> </td> </tr> <tr> <td><code>strokeStyle</code></td> <td><code>{{ Interface("nsIVariant") }}</code></td> <td> </td> </tr> </tbody>
</table>
<h2 name="Constants">Constants</h2>
<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 name="Methods">Methods</h2>
<h3 name="arc()">arc()</h3>
<pre class="eval">void arc(
  in float x,
  in float y,
  in float r,
  in float startAngle,
  in float endAngle,
  in boolean anticlockwise {{ optional_inline("2.0") }}
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>r</code></dt> <dd> </dd><dt><code>startAngle</code></dt> <dd> </dd><dt><code>endAngle</code></dt> <dd> </dd><dt><code>anticlockwise</code> {{ optional_inline() }}</dt> <dd>
</dd></dl>
<h3 name="arcTo()">arcTo()</h3>
<pre class="eval">void arcTo(
  in float x1,
  in float y1,
  in float x2,
  in float y2,
  in float radius
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x1</code></dt> <dd> </dd><dt><code>y1</code></dt> <dd> </dd><dt><code>x2</code></dt> <dd> </dd><dt><code>y2</code></dt> <dd> </dd><dt><code>radius</code></dt> <dd>
</dd></dl>
<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_inline() }}
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>elem</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </dd><dt><code>h</code></dt> <dd> </dd><dt><code>bgColor</code></dt> <dd> </dd><dt><code>flags</code> {{ optional_inline() }}</dt> <dd>
</dd></dl>
<h3 name="beginPath()">beginPath()</h3>
<pre class="eval">void beginPath();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="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 name="Parameters">Parameters</h6>
<dl> <dt><code>cp1x</code></dt> <dd> </dd><dt><code>cp1y</code></dt> <dd> </dd><dt><code>cp2x</code></dt> <dd> </dd><dt><code>cp2y</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<h3 name="clearRect()">clearRect()</h3>
<pre class="eval">void clearRect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </dd><dt><code>h</code></dt> <dd>
</dd></dl>
<h3 name="clip()">clip()</h3>
<pre class="eval">void clip();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="closePath()">closePath()</h3>
<pre class="eval">void closePath();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<p>{{ method_gecko_minversion("createImageData","1.9.1") }}</p>
<pre class="eval">void createImageData();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="createLinearGradient()">createLinearGradient()</h3>
<pre class="eval">nsIDOMCanvasGradient createLinearGradient(
  in float x0,
  in float y0,
  in float x1,
  in float y1
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x0</code></dt> <dd> </dd><dt><code>y0</code></dt> <dd> </dd><dt><code>x1</code></dt> <dd> </dd><dt><code>y1</code></dt> <dd>
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p> </p>
<h3 name="createPattern()">createPattern()</h3>
<pre class="eval">nsIDOMCanvasPattern createPattern(
  in nsIDOMHTMLElement image,
  in DOMString repetition
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>image</code></dt> <dd> </dd><dt><code>repetition</code></dt> <dd>
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p> </p>
<h3 name="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 name="Parameters">Parameters</h6>
<dl> <dt><code>x0</code></dt> <dd> </dd><dt><code>y0</code></dt> <dd> </dd><dt><code>r0</code></dt> <dd> </dd><dt><code>x1</code></dt> <dd> </dd><dt><code>y1</code></dt> <dd> </dd><dt><code>r1</code></dt> <dd>
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p> </p>
<p>{{ method_gecko_minversion("drawImage", "2.0") }}</p>
<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 sw,
  in float sh
);

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 sw,
  in float sh
);
</pre>
<h6 name="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>
<dl><h6 name="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>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. As per the specification, this no longer happens.</li> </ul> <dl><h3 name="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_inline() }} {{ gecko_minversion_inline("1.9.1") }}
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>window</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </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>
<h3 name="fill()">fill()</h3>
<pre class="eval">void fill();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="fillRect()">fillRect()</h3>
<pre class="eval">void fillRect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </dd><dt><code>h</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("fillText","1.9.1") }}</p>
<pre class="eval">void fillText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth {{ optional_inline() }}
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>text</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>maxWidth</code> {{ optional_inline() }}</dt> <dd>
</dd></dl>
<p>{{ method_noscript("getFillStyle_multi") }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<pre class="eval">void getFillStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>str</code></dt> <dd> </dd><dt><code>iface</code></dt> <dd> </dd><dt><code>type</code></dt> <dd>
</dd></dl>
<h3 name="getImageData()">getImageData()</h3>
<pre class="eval">void getImageData();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<p>{{ method_noscript("getImageData_explicit") }}</p>
<p>{{ gecko_minversion_header("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 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>width</code></dt> <dd> </dd><dt><code>height</code></dt> <dd> </dd><dt><code>dataPtr</code></dt> <dd> </dd><dt><code>dataLen</code></dt> <dd>
</dd></dl>
<p>{{ method_noscript("getStrokeStyle_multi") }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<pre class="eval">void getStrokeStyle_multi(
  out DOMString str,
  out nsISupports iface,
  out long type
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>str</code></dt> <dd> </dd><dt><code>iface</code></dt> <dd> </dd><dt><code>type</code></dt> <dd>
</dd></dl>
<h3 name="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 name="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 name="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>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 name="lineTo()">lineTo()</h3>
<pre class="eval">void lineTo(
  in float x,
  in float y
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("measureText","1.9.1") }}</p>
<pre class="eval">nsIDOMTextMetrics measureText(
  in DOMString text
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>text</code></dt> <dd>
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p> </p>
<h3 name="moveTo()">moveTo()</h3>
<pre class="eval">void moveTo(
  in float x,
  in float y
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("mozDrawText","1.9") }}</p>
<pre class="eval">void mozDrawText(
  in DOMString textToDraw
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>textToDraw</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("mozMeasureText","1.9") }}</p>
<pre class="eval">float mozMeasureText(
  in DOMString textToMeasure
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>textToMeasure</code></dt> <dd>
</dd></dl>
<h6 name="Return_value">Return value</h6>
<p> </p>
<p>{{ method_gecko_minversion("mozPathText","1.9") }}</p>
<pre class="eval">void mozPathText(
  in DOMString textToPath
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>textToPath</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("mozTextAlongPath","1.9") }}</p>
<pre class="eval">void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>textToDraw</code></dt> <dd> </dd><dt><code>stroke</code></dt> <dd>
</dd></dl>
<h3 name="putImageData()">putImageData()</h3>
<pre class="eval">void putImageData();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<p>{{ method_noscript("putImageData_explicit") }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<pre class="eval">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
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>width</code></dt> <dd> </dd><dt><code>height</code></dt> <dd> </dd><dt><code>dataPtr</code></dt> <dd> </dd><dt><code>dataLen</code></dt> <dd> </dd><dt><code>hasDirtyRect</code></dt> <dd> </dd><dt><code>dirtyX</code></dt> <dd> </dd><dt><code>dirtyY</code></dt> <dd> </dd><dt><code>dirtyWidth</code></dt> <dd> </dd><dt><code>dirtyHeight</code></dt> <dd>
</dd></dl>
<h3 name="quadraticCurveTo()">quadraticCurveTo()</h3>
<pre class="eval">void quadraticCurveTo(
  in float cpx,
  in float cpy,
  in float x,
  in float y
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>cpx</code></dt> <dd> </dd><dt><code>cpy</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<h3 name="rect()">rect()</h3>
<pre class="eval">void rect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </dd><dt><code>h</code></dt> <dd>
</dd></dl>
<h3 name="restore()">restore()</h3>
<pre class="eval">void restore();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="rotate()">rotate()</h3>
<pre class="eval">void rotate(
  in float angle
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>angle</code></dt> <dd>
</dd></dl>
<h3 name="save()">save()</h3>
<pre class="eval">void save();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="scale()">scale()</h3>
<pre class="eval">void scale(
  in float x,
  in float y
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<p>{{ method_noscript("setFillStyle_multi") }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<pre class="eval">void setFillStyle_multi(
  in DOMString str,
  in nsISupports iface
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>str</code></dt> <dd> </dd><dt><code>iface</code></dt> <dd>
</dd></dl>
<p>{{ method_noscript("setStrokeStyle_multi") }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<pre class="eval">void setStrokeStyle_multi(
  in DOMString str,
  in nsISupports iface
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>str</code></dt> <dd> </dd><dt><code>iface</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("setTransform","1.9") }}</p>
<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 name="Parameters">Parameters</h6>
<dl> <dt><code>m11</code></dt> <dd> </dd><dt><code>m12</code></dt> <dd> </dd><dt><code>m21</code></dt> <dd> </dd><dt><code>m22</code></dt> <dd> </dd><dt><code>dx</code></dt> <dd> </dd><dt><code>dy</code></dt> <dd>
</dd></dl>
<h3 name="stroke()">stroke()</h3>
<pre class="eval">void stroke();
</pre>
<h6 name="Parameters">Parameters</h6>
<p>None.</p>
<h3 name="strokeRect()">strokeRect()</h3>
<pre class="eval">void strokeRect(
  in float x,
  in float y,
  in float w,
  in float h
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>w</code></dt> <dd> </dd><dt><code>h</code></dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("strokeText","1.9.1") }}</p>
<pre class="eval">void strokeText(
  in DOMString text,
  in float x,
  in float y,
  in float maxWidth {{ optional_inline() }}
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>text</code></dt> <dd> </dd><dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd> </dd><dt><code>maxWidth</code> {{ optional_inline() }}</dt> <dd>
</dd></dl>
<p>{{ method_gecko_minversion("transform","1.9") }}</p>
<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 name="Parameters">Parameters</h6>
<dl> <dt><code>m11</code></dt> <dd> </dd><dt><code>m12</code></dt> <dd> </dd><dt><code>m21</code></dt> <dd> </dd><dt><code>m22</code></dt> <dd> </dd><dt><code>dx</code></dt> <dd> </dd><dt><code>dy</code></dt> <dd>
</dd></dl>
<h3 name="translate()">translate()</h3>
<pre class="eval">void translate(
  in float x,
  in float y
);
</pre>
<h6 name="Parameters">Parameters</h6>
<dl> <dt><code>x</code></dt> <dd> </dd><dt><code>y</code></dt> <dd>
</dd></dl>
<h2>Notes</h2>
<p>These notes need to go into the compatibility section's Gecko notes block once that table is in place.</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> now correctly throws an <code>INDEX_SIZE_ERR</code> exception.</li> <li>Specifying non-finite values when calling <code>createLinearGradient()</code> 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> and <code>createImageData()</code> now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis. <strong>We need an article about <a class=" external" href="http://dev.w3.org/csswg/css3-images/#default-sizing" title="http://dev.w3.org/csswg/css3-images/#default-sizing">CSS sizing</a> and how this works.</strong></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> 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> 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>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></dl></dl>
Revert to this revision