class js.html.CanvasRenderingContext2D extends CanvasRenderingContext
Available on js
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.
Documentation for this class was provided by MDN.
Instance Fields
var globalAlpha:Float
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0
(opaque).
var globalCompositeOperation:String
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
function arc(x:Float, y:Float, radius:Float, startAngle:Float, endAngle:Float, anticlockwise:Bool):Void
function createImageData(sw:Float, sh:Float):ImageData
function createImageData(imagedata:ImageData):ImageData
Throws DOMException.
function createPattern(image:ImageElement, repetitionType:String):CanvasPattern
function createPattern(canvas:CanvasElement, repetitionType:String):CanvasPattern
Parameters
Return value
A new DOM canvas pattern object for use in pattern-based operations.
Exceptions thrown
NS_ERROR_DOM_INVALID_STATE_ERR
Requires Gecko 10.0- The specified
<canvas>
element for theimage
parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).
function createRadialGradient(x0:Float, y0:Float, r0:Float, x1:Float, y1:Float, r1:Float):CanvasGradient
function drawImage(video:VideoElement, sx:Float, sy:Float, sw:Float, sh:Float, dx:Float, dy:Float, dw:Float, dh:Float):Void
function drawImage(image:ImageElement, x:Float, y:Float):Void
function drawImage(image:ImageElement, x:Float, y:Float, width:Float, height:Float):Void
function drawImage(image:ImageElement, sx:Float, sy:Float, sw:Float, sh:Float, dx:Float, dy:Float, dw:Float, dh:Float):Void
function drawImage(canvas:CanvasElement, x:Float, y:Float):Void
function drawImage(canvas:CanvasElement, x:Float, y:Float, width:Float, height:Float):Void
function drawImage(canvas:CanvasElement, sx:Float, sy:Float, sw:Float, sh:Float, dx:Float, dy:Float, dw:Float, dh:Float):Void
function drawImage(video:VideoElement, x:Float, y:Float):Void
function drawImage(video:VideoElement, x:Float, y:Float, width:Float, height:Float):Void
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
Parameters
image
- An element to draw into the context; the specification permits any image element (that is,
<img>
,<canvas>
, and<video>
). Some browsers, including Firefox, let you use any arbitrary element. dx
- The X coordinate in the destination canvas at which to place the top-left corner of the source
image
. dy
- The Y coordinate in the destination canvas at which to place the top-left corner of the source
image
. dw
- The width to draw the
image
in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn. dh
- The height to draw the
image
in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn. sx
- The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy
- The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw
- The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by
sx
andsy
to the bottom-right corner of the image is used. If you specify a negative value, the image is flipped horizontally when drawn. sh
- The height of the sub-rectangle of the source image to draw into the destination context. If you specify a negative value, the image is flipped vertically when drawn.
The diagram below illustrates the meanings of the various parameters.
Exceptions thrown
INDEX_SIZE_ERR
- If the canvas or source rectangle width or height is zero.
INVALID_STATE_ERR
- The image has no image data.
TYPE_MISMATCH_ERR
- The specified source element isn't supported. This is not thrown by Firefox, since any element may be used as a source image.
Compatibility notes
- Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) , Firefox threw an exception if any of the coordinate values was non-finite or zero. As per the specification, this no longer happens.
- Support for flipping the image by using negative values for
sw
andsh
was added in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) . - Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) now correctly supports CORS for drawing images across domains without tainting the canvas.
function drawImageFromRect(image:ImageElement, ?sx:Float, ?sy:Float, ?sw:Float, ?sh:Float, ?dx:Float, ?dy:Float, ?dw:Float, ?dh:Float, ?compositeOperation:String):Void
function putImageData(imagedata:ImageData, dx:Float, dy:Float, dirtyX:Float, dirtyY:Float, dirtyWidth:Float, dirtyHeight:Float):Void
function putImageData(imagedata:ImageData, dx:Float, dy:Float):Void
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.
function putImageDataHD(imagedata:ImageData, dx:Float, dy:Float, dirtyX:Float, dirtyY:Float, dirtyWidth:Float, dirtyHeight:Float):Void
function putImageDataHD(imagedata:ImageData, dx:Float, dy:Float):Void
Throws DOMException.
function setFillColor(c:Float, m:Float, y:Float, k:Float, a:Float):Void
function setFillColor(color:String, ?alpha:Float):Void
function setFillColor(grayLevel:Float, ?alpha:Float):Void
function setFillColor(r:Float, g:Float, b:Float, a:Float):Void
function setShadow(width:Float, height:Float, blur:Float, c:Float, m:Float, y:Float, k:Float, a:Float):Void
function setShadow(width:Float, height:Float, blur:Float, ?color:String, ?alpha:Float):Void
function setShadow(width:Float, height:Float, blur:Float, grayLevel:Float, ?alpha:Float):Void
function setShadow(width:Float, height:Float, blur:Float, r:Float, g:Float, b:Float, a:Float):Void