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 backingStorePixelRatio: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