haXe API Documentation
Back | Index
extern class js.html.CanvasRenderingContext2D
extends CanvasRenderingContext
Available in 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.
var backingStorePixelRatio(default,null) : Float
var fillStyle : Dynamic
Color or style to use inside shapes. Default #000 (black).
var font : String
Default value 10px sans-serif.
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
var imageSmoothingEnabled : Bool
var lineCap : String
Type of endings on the end of lines. Possible values: butt (default), round, square
var lineDash : Array<Dynamic>
var lineDashOffset : Float
var lineJoin : String
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)
var lineWidth : Float
Width of lines. Default 1.0
var miterLimit : Float
Default 10.
var shadowBlur : Float
Specifies the blurring effect. Default 0
var shadowColor : String
Color of the shadow. Default fully-transparent black.
var shadowOffsetX : Float
Horizontal distance the shadow will be offset. Default 0.
var shadowOffsetY : Float
Vertical distance the shadow will be offset. Default 0.
var strokeStyle : Dynamic
Color or style to use for the lines around shapes. Default #000 (black).
var textAlign : String
Possible 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) : ImageData
Throws 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) : Void
Throws 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
Back | Index