CanvasRenderingContext2D

Haxe API > js > html > 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:
  • source-atop
  • source-in
  • source-out
  • source-over (default)
  • destination-atop
  • destination-in
  • destination-out
  • destination-over
  • lighter
  • xor
 var imageSmoothingEnabled : Bool var lineCap : StringType of endings on the end of lines. Possible values: butt (default), round, square var lineDash : Array<Dynamic> var lineDashOffset : Float var lineJoin : StringDefines the type of corners where two lines meet. Possible values: round, bevel, miter (default) var lineWidth : FloatWidth of lines. Default 1.0 var miterLimit : FloatDefault 10. var shadowBlur : FloatSpecifies the blurring effect. Default 0 var shadowColor : StringColor of the shadow. Default fully-transparent black. var shadowOffsetX : FloatHorizontal distance the shadow will be offset. Default 0. var shadowOffsetY : FloatVertical distance the shadow will be offset. Default 0. var strokeStyle : DynamicColor or style to use for the lines around shapes. Default #000 (black). var textAlign : StringPossible values: start (default), end, left, right or center. var textBaseline : String function arc( x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, anticlockwise : Bool ) : Void function arcTo( x1 : Float, y1 : Float, x2 : Float, y2 : Float, radius : Float ) : Void function beginPath() : Void function bezierCurveTo( cp1x : Float, cp1y : Float, cp2x : Float, cp2y : Float, x : Float, y : Float ) : Void function clearRect( x : Float, y : Float, width : Float, height : Float ) : Void function clearShadow() : Void function clip() : Void function closePath() : Void function createImageData( sw : Float, sh : Float ) : ImageDataThrows DOMException. function createLinearGradient( x0 : Float, y0 : Float, x1 : Float, y1 : Float ) : CanvasGradient function createPattern( image : ImageElement, repetitionType : String ) : CanvasPattern
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).
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

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.

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 (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.
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
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.
Throws DOMException. function putImageDataHD( imagedata : ImageData, dx : Float, dy : Float, dirtyX : Float, dirtyY : Float, dirtyWidth : Float, dirtyHeight : Float ) : VoidThrows DOMException. function quadraticCurveTo( cpx : Float, cpy : Float, x : Float, y : Float ) : Void function rect( x : Float, y : Float, width : Float, height : Float ) : Void function restore() : Void function rotate( angle : Float ) : Void function save() : Void function scale( sx : Float, sy : Float ) : Void function setAlpha( alpha : Float ) : Void function setCompositeOperation( compositeOperation : String ) : Void function setFillColor( c : Float, m : Float, y : Float, k : Float, a : Float ) : Void function setLineCap( cap : String ) : Void function setLineDash( dash : Array<Float> ) : Void function setLineJoin( join : String ) : Void function setLineWidth( width : Float ) : Void function setMiterLimit( limit : Float ) : Void function setShadow( width : Float, height : Float, blur : Float, c : Float, m : Float, y : Float, k : Float, a : Float ) : Void function setStrokeColor( c : Float, m : Float, y : Float, k : Float, a : Float ) : Void function setTransform( m11 : Float, m12 : Float, m21 : Float, m22 : Float, dx : Float, dy : Float ) : Void function stroke() : Void function strokeRect( x : Float, y : Float, width : Float, height : Float, ?lineWidth : Float ) : Void function strokeText( text : String, x : Float, y : Float, ?maxWidth : Float ) : Void function transform( m11 : Float, m12 : Float, m21 : Float, m22 : Float, dx : Float, dy : Float ) : Void function translate( tx : Float, ty : Float ) : Void
version #18232, modified 2013-05-01 11:56:43 by api
0 comment