Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
  /*
   * Copyright 2012 Google Inc.
   * 
   * Licensed under the Apache License, Version 2.0 (the "License"); you may not
   * use this file except in compliance with the License. You may obtain a copy of
   * the License at
   * 
   * http://www.apache.org/licenses/LICENSE-2.0
   * 
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  * License for the specific language governing permissions and limitations under
  * the License.
  */
 package elemental.html;
 
 import  elemental.html.*;
 
 import java.util.Date;

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


  
Color or style to use inside shapes. Default #000 (black).
 
 
   void setFillStyle(Object arg);


  
Default value 10px sans-serif.
 
   String getFont();
 
   void setFont(String arg);


  
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
 
   float getGlobalAlpha();
 
   void setGlobalAlpha(float arg);


  
With globalAplpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values:
  • source-atop
  • source-in
  • source-out
  • source-over (default)
  • destination-atop
  • destination-in
  • destination-out
  • destination-over
  • lighter
  • xor
 
 
   void setGlobalCompositeOperation(String arg);


  
Type of endings on the end of lines. Possible values: butt (default), round, square
 
 
   void setLineCap(String arg);


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


  
Width of lines. Default 1.0
 
   float getLineWidth();
 
   void setLineWidth(float arg);


  
Default 10.
 
   float getMiterLimit();
 
   void setMiterLimit(float arg);


  
Specifies the blurring effect. Default 0
  float getShadowBlur();
  void setShadowBlur(float arg);


  
Color of the shadow. Default fully-transparent black.
  void setShadowColor(String arg);


  
Horizontal distance the shadow will be offset. Default 0.
  float getShadowOffsetX();
  void setShadowOffsetX(float arg);


  
Vertical distance the shadow will be offset. Default 0.
  float getShadowOffsetY();
  void setShadowOffsetY(float arg);


  
Color or style to use for the lines around shapes. Default #000 (black).
  void setStrokeStyle(Object arg);


  
Possible values: start (default), end, left, right or center.
  void setTextAlign(String arg);
  void setTextBaseline(String arg);
Image smoothing mode; if disabled, images will not be smoothed if scaled. Requires Gecko 1.9.2
  void setWebkitImageSmoothingEnabled(boolean arg);


  
An array which specifies the lengths of alternating dashes and gaps.
  void setWebkitLineDash(Indexable arg);


  
Specifies where to start a dasharray on a line.
  void setWebkitLineDashOffset(float arg);


  

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

Parameters
x
The x axis of the coordinate for the arc's center
y
The y axis of the coordinate for the arc's center.
radius
The arc's radius
startAngle
The starting point, measured from the x axis , from which it will be drawed expressed as radians.
endAngle
The end arc's angle to which it will be drawed expressed as radians.
anticlockwise Optional from Gecko 2.0
When true draws the arc anticlockwise, otherwise in a clockwise direction.
  void arc(float xfloat yfloat radiusfloat startAnglefloat endAngleboolean anticlockwise);


  

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

Parameters
x1
y1
x2
y2
radius
The arc's radius.
  void arcTo(float x1float y1float x2float y2float radius);
  void beginPath();
  void bezierCurveTo(float cp1xfloat cp1yfloat cp2xfloat cp2yfloat xfloat y);


  

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

Parameters
x
The x axis of the coordinate for the rectangle starting point.
y
The y axis of the coordinate for the rectangle starting point.
width
The rectangle's width.
height
The rectangle's height.
  void clearRect(float xfloat yfloat widthfloat height);
  void clearShadow();
  void clip();
  void closePath();
  ImageData createImageData(float swfloat sh);
  CanvasGradient createLinearGradient(float x0float y0float x1float y1);


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

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

Exceptions thrown
NS_ERROR_DOM_INVALID_STATE_ERR Requires Gecko 10.0
The specified <canvas> element for the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).
  CanvasPattern createPattern(CanvasElement canvasString repetitionType);


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

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

Exceptions thrown
NS_ERROR_DOM_INVALID_STATE_ERR Requires Gecko 10.0
The specified <canvas> element for the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).
  CanvasPattern createPattern(ImageElement imageString repetitionType);
  CanvasGradient createRadialGradient(float x0float y0float r0float x1float y1float r1);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(ImageElement imagefloat xfloat y);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(ImageElement imagefloat xfloat yfloat widthfloat height);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(ImageElement imagefloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dwfloat dh);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(CanvasElement canvasfloat xfloat y);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(CanvasElement canvasfloat xfloat yfloat widthfloat height);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(CanvasElement canvasfloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dwfloat dh);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(VideoElement videofloat xfloat y);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(VideoElement videofloat xfloat yfloat widthfloat height);


  

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

Parameters
image
An element to draw into the context; the specification permits any image element (that is, <img> , <canvas> , and <video> ). Some browsers, including Firefox, let you use any arbitrary element.
dx
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dh
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
sx
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn.
sh
The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.

The diagram below illustrates the meanings of the various parameters.

Exceptions thrown
INDEX_SIZE_ERR
If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
The image has no image data.
TYPE_MISMATCH_ERR
The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
  • Support for flipping the image by using negative values for sw and sh was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) .
  • Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
  void drawImage(VideoElement videofloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dwfloat dh);
  void drawImageFromRect(ImageElement imagefloat sx);
  void drawImageFromRect(ImageElement imagefloat sxfloat sy);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat sw);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat sh);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat shfloat dx);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat shfloat dxfloat dy);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dw);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dwfloat dh);
  void drawImageFromRect(ImageElement imagefloat sxfloat syfloat swfloat shfloat dxfloat dyfloat dwfloat dhString compositeOperation);


  
Fills the subpaths with the current fill style.
  void fill();


  

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

Parameters
x
The x axis of the coordinate for the rectangle starting point.
y
The y axis of the coordinate for the rectangle starting point.
width
The rectangle's width.
height
The rectangle's height.
  void fillRect(float xfloat yfloat widthfloat height);
  void fillText(String textfloat xfloat y);
  void fillText(String textfloat xfloat yfloat maxWidth);


  

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

Parameters
sx
The x axis of the coordinate for the rectangle startpoint from which the ImageData will be extracted.
sy
The x axis of the coordinate for the rectangle endpoint from which the ImageData will be extracted.
sw
The width of the rectangle from which the ImageData will be extracted.
sh
The height of the rectangle from which the ImageData will be extracted.
Return value

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

  ImageData getImageData(float sxfloat syfloat swfloat sh);


  

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

Parameters
x
The X coordinate of the point to check.
y
The Y coordinate of the point to check.
Return value

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

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


  

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

Parameters
x
The x axis of the coordinate for the end of the line.
y
The y axis of the coordinate for the end of the line.
  void lineTo(float xfloat y);

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

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


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


  
Compatibility notes
  • Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) , non-finite values to any of these parameters causes the call to putImageData() to be silently ignored, rather than throwing an exception.
  void putImageData(ImageData imagedatafloat dxfloat dyfloat dirtyXfloat dirtyYfloat dirtyWidthfloat dirtyHeight);
  void quadraticCurveTo(float cpxfloat cpyfloat xfloat y);
  void rect(float xfloat yfloat widthfloat height);


  
Restores the drawing style state to the last element on the 'state stack' saved by save()
  void restore();
  void rotate(float angle);


  
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
  void save();
  void scale(float sxfloat sy);
  void setAlpha(float alpha);
  void setCompositeOperation(String compositeOperation);
  void setFillColor(String color);
  void setFillColor(String colorfloat alpha);
  void setFillColor(float grayLevel);
  void setFillColor(float grayLevelfloat alpha);
  void setFillColor(float rfloat gfloat bfloat a);
  void setFillColor(float cfloat mfloat yfloat kfloat a);
  void setShadow(float widthfloat heightfloat blur);
  void setShadow(float widthfloat heightfloat blurString color);
  void setShadow(float widthfloat heightfloat blurString colorfloat alpha);
  void setShadow(float widthfloat heightfloat blurfloat grayLevel);
  void setShadow(float widthfloat heightfloat blurfloat grayLevelfloat alpha);
  void setShadow(float widthfloat heightfloat blurfloat rfloat gfloat bfloat a);
  void setShadow(float widthfloat heightfloat blurfloat cfloat mfloat yfloat kfloat a);
  void setStrokeColor(String color);
  void setStrokeColor(String colorfloat alpha);
  void setStrokeColor(float grayLevel);
  void setStrokeColor(float grayLevelfloat alpha);
  void setStrokeColor(float rfloat gfloat bfloat a);
  void setStrokeColor(float cfloat mfloat yfloat kfloat a);
  void setTransform(float m11float m12float m21float m22float dxfloat dy);


  
Strokes the subpaths with the current stroke style.
  void stroke();


  

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

Parameters
x
The x axis for the starting point of the rectangle.
y
The y axis for the starting point of the rectangle.
w
The rectangle's width.
h
The rectangle's height.
  void strokeRect(float xfloat yfloat widthfloat height);


  

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

Parameters
x
The x axis for the starting point of the rectangle.
y
The y axis for the starting point of the rectangle.
w
The rectangle's width.
h
The rectangle's height.
  void strokeRect(float xfloat yfloat widthfloat heightfloat lineWidth);
  void strokeText(String textfloat xfloat y);
  void strokeText(String textfloat xfloat yfloat maxWidth);
  void transform(float m11float m12float m21float m22float dxfloat dy);


  

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

Parameters
x
The x axis for the point to be considered as the origin.
y
The x axis for the point to be considered as the origin.
  void translate(float txfloat ty);
  ImageData webkitGetImageDataHD(float sxfloat syfloat swfloat sh);
  void webkitPutImageDataHD(ImageData imagedatafloat dxfloat dy);
  void webkitPutImageDataHD(ImageData imagedatafloat dxfloat dyfloat dirtyXfloat dirtyYfloat dirtyWidthfloat dirtyHeight);
New to GrepCode? Check out our FAQ X