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.

API documentation sourced from MDN Web Docs.

on
Implemented types
Available extensions

Properties

canvas → HTMLCanvasElement
The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context. It might be null if there is no associated canvas element.
no setter
direction ↔ CanvasDirection
The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw text.
getter/setter pair
fillStyle ↔ JSAny
The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is #000 (black).
getter/setter pair
filter ↔ String
The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.
getter/setter pair
font ↔ String
The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
getter/setter pair
fontKerning ↔ CanvasFontKerning
The CanvasRenderingContext2D.fontKerning property of the Canvas API specifies how font kerning information is used.
getter/setter pair
fontStretch ↔ CanvasFontStretch
The CanvasRenderingContext2D.fontStretch property of the Canvas API specifies how the font may be expanded or condensed when drawing text.
getter/setter pair
fontVariantCaps ↔ CanvasFontVariantCaps
The CanvasRenderingContext2D.fontVariantCaps property of the Canvas API specifies an alternative capitalization of the rendered text.
getter/setter pair
globalAlpha ↔ double
The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
getter/setter pair
globalCompositeOperation ↔ String
The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes.
getter/setter pair
hashCode → int
The hash code for this object.
no setterinherited
imageSmoothingEnabled ↔ bool
The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.
getter/setter pair
imageSmoothingQuality ↔ ImageSmoothingQuality
The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.
getter/setter pair
letterSpacing ↔ String
The CanvasRenderingContext2D.letterSpacing property of the Canvas API specifies the spacing between letters when drawing text.
getter/setter pair
lineCap ↔ CanvasLineCap
The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.
getter/setter pair
lineDashOffset ↔ double
The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."
getter/setter pair
lineJoin ↔ CanvasLineJoin
The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.
getter/setter pair
lineWidth ↔ double
The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.
getter/setter pair
miterLimit ↔ double
The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.
getter/setter pair
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shadowBlur ↔ double
The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0 (no blur).
getter/setter pair
shadowColor ↔ String
The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.
getter/setter pair
shadowOffsetX ↔ double
The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.
getter/setter pair
shadowOffsetY ↔ double
The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.
getter/setter pair
strokeStyle ↔ JSAny
The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black).
getter/setter pair
textAlign ↔ CanvasTextAlign
The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.
getter/setter pair
textBaseline ↔ CanvasTextBaseline
The CanvasRenderingContext2D.textBaseline property of the Canvas 2D API specifies the current text baseline used when drawing text.
getter/setter pair
textRendering ↔ CanvasTextRendering
The CanvasRenderingContext2D.textRendering property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.
getter/setter pair
wordSpacing ↔ String
The CanvasRenderingContext2D.wordSpacing property of the Canvas API specifies the spacing between words when drawing text.
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.
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