CanvasRenderingContext2D
extern class js.html.CanvasRenderingContext2Dextends CanvasRenderingContextAvailable in jsThe 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. var backingStorePixelRatio(default,null) : Float var fillStyle : DynamicColor or style to use inside shapes. Default #000 (black). var font : StringDefault value 10px sans-serif. var globalAlpha : FloatAlpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). var globalCompositeOperation : StringWith globalAplpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: Throws DOMException.
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
Throws DOMException.
function drawImageFromRect( image : ImageElement, ?sx : Float, ?sy : Float, ?sw : Float, ?sh : Float, ?dx : Float, ?dy : Float, ?dw : Float, ?dh : Float, ?compositeOperation : String ) : Void
function fill() : Void
function fillRect( x : Float, y : Float, width : Float, height : Float ) : Void
function fillText( text : String, x : Float, y : Float, ?maxWidth : Float ) : Void
function getImageData( sx : Float, sy : Float, sw : Float, sh : Float ) : ImageData
function getImageDataHD( sx : Float, sy : Float, sw : Float, sh : Float ) : ImageData
function getLineDash() : Array<Float>
function isPointInPath( x : Float, y : Float ) : Bool
function lineTo( x : Float, y : Float ) : Void
function measureText( text : String ) : TextMetrics
function moveTo( x : Float, y : Float ) : Void
function putImageData( imagedata : ImageData, dx : Float, dy : Float, dirtyX : Float, dirtyY : Float, dirtyWidth : Float, dirtyHeight : Float ) : Void
Documentation for this class was provided by MDN. var backingStorePixelRatio(default,null) : Float var fillStyle : DynamicColor or style to use inside shapes. Default #000 (black). var font : StringDefault value 10px sans-serif. var globalAlpha : FloatAlpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). var globalCompositeOperation : StringWith 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
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 the image parameter is zero-sized (that is, one or both of its dimensions are 0 pixels).
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.
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.
version #18232, modified 2013-05-01 11:56:43 by api
0 comment