CanvasRenderingContext2D extension type

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects.

The interface's properties and methods are described in the reference section of this page. The Canvas tutorial has more explanation, examples, and resources, as well.

For OffscreenCanvas, there is an equivalent interface that provides the rendering context. The offscreen rendering context inherits most of the same properties and methods as the CanvasRenderingContext2D and is described in more detail in the OffscreenCanvasRenderingContext2D reference page.

on

• JSObject

Implemented types

• JSObject

Properties

canvas → HTMLCanvasElement

no setter

direction ↔ CanvasDirection

getter/setter pair

fillStyle ↔ JSAny

getter/setter pair

filter ↔ String

getter/setter pair

font ↔ String

getter/setter pair

fontKerning ↔ CanvasFontKerning

getter/setter pair

fontStretch ↔ CanvasFontStretch

getter/setter pair

fontVariantCaps ↔ CanvasFontVariantCaps

getter/setter pair

globalAlpha ↔ num

getter/setter pair

globalCompositeOperation ↔ String

getter/setter pair

hashCode → int

The hash code for this object.

no setter, inherited

imageSmoothingEnabled ↔ bool

getter/setter pair

imageSmoothingQuality ↔ ImageSmoothingQuality

getter/setter pair

letterSpacing ↔ String

getter/setter pair

lineCap ↔ CanvasLineCap

getter/setter pair

lineDashOffset ↔ num

getter/setter pair

lineJoin ↔ CanvasLineJoin

getter/setter pair

lineWidth ↔ num

getter/setter pair

miterLimit ↔ num

getter/setter pair

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

shadowBlur ↔ num

getter/setter pair

shadowColor ↔ String

getter/setter pair

shadowOffsetX ↔ num

getter/setter pair

shadowOffsetY ↔ num

getter/setter pair

strokeStyle ↔ JSAny

getter/setter pair

textAlign ↔ CanvasTextAlign

getter/setter pair

textBaseline ↔ CanvasTextBaseline

getter/setter pair

textRendering ↔ CanvasTextRendering

getter/setter pair

wordSpacing ↔ String

getter/setter pair

Methods

arc(num x, num y, num radius, num startAngle, num endAngle, [bool counterclockwise]) → void

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.

arcTo(num x1, num y1, num x2, num y2, num radius) → void

The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds a circular arc to the current sub-path, using the given control points and radius. The arc is automatically connected to the path's latest point with a straight line if necessary, for example if the starting point and control points are in a line.

beginPath() → void

The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

bezierCurveTo(num cp1x, num cp1y, num cp2x, num cp2y, num x, num y) → void

The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using CanvasRenderingContext2D.moveTo before creating the Bézier curve.

clearRect(num x, num y, num w, num h) → void

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area by setting them to transparent black.

clip([JSAny fillRuleOrPath, CanvasFillRule fillRule]) → void

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.

closePath() → void

The CanvasRenderingContext2D.closePath() method of the Canvas 2D API attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.

createConicGradient(num startAngle, num x, num y) → CanvasGradient

The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around a point with given coordinates.

createImageData(JSAny imagedataOrSw, [int sh, ImageDataSettings settings]) → ImageData

The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

createLinearGradient(num x0, num y0, num x1, num y1) → CanvasGradient

The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.

createPattern(CanvasImageSource image, String repetition) → CanvasPattern?

The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern.

createRadialGradient(num x0, num y0, num r0, num x1, num y1, num r1) → CanvasGradient

The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.

drawFocusIfNeeded(JSObject elementOrPath, [Element element]) → void

The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring around the current or given path, if the specified element is focused.

drawImage(CanvasImageSource image, num dxOrSx, num dyOrSy, [num dwOrSw, num dhOrSh, num dx, num dy, num dw, num dh]) → void

The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.

ellipse(num x, num y, num radiusX, num radiusY, num rotation, num startAngle, num endAngle, [bool counterclockwise]) → void

The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.

fill([JSAny fillRuleOrPath, CanvasFillRule fillRule]) → void

The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the current CanvasRenderingContext2D.fillStyle.

fillRect(num x, num y, num w, num h) → void

The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current CanvasRenderingContext2D.fillStyle.

fillText(String text, num x, num y, [num maxWidth]) → void

The CanvasRenderingContext2D method fillText(), part of the Canvas 2D API, draws a text string at the specified coordinates, filling the string's characters with the current CanvasRenderingContext2D.fillStyle. An optional parameter allows specifying a maximum width for the rendered text, which the will achieve by condensing the text or by using a lower font size.

getContextAttributes() → CanvasRenderingContext2DSettings

The CanvasRenderingContext2D.getContextAttributes() method returns an object that contains attributes used by the context.

getImageData(int sx, int sy, int sw, int sh, [ImageDataSettings settings]) → ImageData

The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.

getLineDash() → JSArray<JSNumber>

The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.

getTransform() → DOMMatrix

The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.

isContextLost() → bool

The CanvasRenderingContext2D.isContextLost() method of the Canvas 2D API returns true if the rendering context is lost (and has not yet been reset). This might occur due to driver crashes, running out of memory, and so on.

isPointInPath(JSAny pathOrX, num xOrY, [JSAny fillRuleOrY, CanvasFillRule fillRule]) → bool

The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.

isPointInStroke(JSAny pathOrX, num xOrY, [num y]) → bool

The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.

lineTo(num x, num y) → void

The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.

measureText(String text) → TextMetrics

The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width, for example).

moveTo(num x, num y) → void

The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y) coordinates.

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

putImageData(ImageData imagedata, int dx, int dy, [int dirtyX, int dirtyY, int dirtyWidth, int dirtyHeight]) → void

The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.

quadraticCurveTo(num cpx, num cpy, num x, num y) → void

The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using CanvasRenderingContext2D.moveTo before creating the quadratic Bézier curve.

rect(num x, num y, num w, num h) → void

The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.

reset() → void

The CanvasRenderingContext2D.reset() method of the Canvas 2D API resets the rendering context to its default state, allowing it to be reused for drawing something else without having to explicitly reset all the properties.

resetTransform() → void

The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.

restore() → void

The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.

rotate(num angle) → void

The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.

roundRect(num x, num y, num w, num h, [JSAny radii]) → void

The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.

save() → void

The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.

scale(num x, num y) → void

The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically.

scrollPathIntoView([Path2D path]) → void

The CanvasRenderingContext2D.scrollPathIntoView() method of the Canvas 2D API scrolls the current or given path into view. It is similar to Element.scrollIntoView.

setLineDash(JSArray<JSNumber> segments) → void

The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.

setTransform([JSAny aOrTransform, num b, num c, num d, num e, num f]) → void

The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.

stroke([Path2D path]) → void

The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.

strokeRect(num x, num y, num w, num h) → void

The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current CanvasRenderingContext2D.strokeStyle and other context settings.

strokeText(String text, num x, num y, [num maxWidth]) → void

The CanvasRenderingContext2D method strokeText(), part of the Canvas 2D API, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. An optional parameter allows specifying a maximum width for the rendered text, which the will achieve by condensing the text or by using a lower font size.

toString() → String

A string representation of this object.

inherited

transform(num a, num b, num c, num d, num e, num f) → void

The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.

translate(num x, num y) → void

The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation transformation to the current matrix.

Operators

operator ==(Object other) → bool

The equality operator.

inherited