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

• JSObject

Implemented types

• JSObject

Available extensions

• CanvasRenderingContext2DExtension
• CanvasRenderingContext2DGlue
• JSAnyExtension
• JSAnyNullableExtension
• JSAnyOperatorExtension
• JSAnyUtilityExtension
• JSObjectExtension
• JSObjectUnsafeUtilExtension
• JSObjectWebExtension
• NullableUndefineableJSAnyExtension

Properties

asString → String

Available on JSAny, provided by the JSAnyExtension extension

no setter

asString → String?

Available on JSAny?, provided by the JSAnyNullableExtension extension

no setter

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

entries → Iterable<MapEntry<String, dynamic>>

Available on JSObject, provided by the JSObjectExtension extension

no setter

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 setter, inherited

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

isDefinedAndNotNull → bool

Available on JSAny?, provided by the NullableUndefineableJSAnyExtension extension

no setter

isElement → bool

Available on JSObject?, provided by the JSObjectWebExtension extension

no setter

isHTMLElement → bool

Available on JSObject?, provided by the JSObjectWebExtension extension

no setter

isNode → bool

Available on JSObject?, provided by the JSObjectWebExtension extension

no setter

isNull → bool

Available on JSAny?, provided by the NullableUndefineableJSAnyExtension extension

Whether this value corresponds to JavaScript null.

no setter

isTruthy → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of !!this in JavaScript.

no setter

isUndefined → bool

Available on JSAny?, provided by the NullableUndefineableJSAnyExtension extension

Whether this value corresponds to JavaScript undefined.

no setter

isUndefinedOrNull → bool

Available on JSAny?, provided by the NullableUndefineableJSAnyExtension extension

no setter

keys → Iterable<String>

Available on JSObject, provided by the JSObjectExtension extension

no setter

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

not → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of !this in JavaScript.

no setter

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

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

add(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this + any in JavaScript.

and(JSAny? any) → JSAny?

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this && any in JavaScript.

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.

as<T extends JSObject>() → T?

Available on JSObject, provided by the JSObjectExtension extension

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.

callMethod<R extends JSAny?>(JSAny method, [JSAny? arg1, JSAny? arg2, JSAny? arg3, JSAny? arg4]) → R

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Calls method on this JSObject with up to four arguments.

callMethodVarArgs<R extends JSAny?>(JSAny method, [List<JSAny?>? arguments]) → R

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Calls method on this JSObject with a variable number of arguments.

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.

dartify() → Object?

Available on JSAny?, provided by the JSAnyUtilityExtension extension

Converts a JavaScript JSON-like value to the Dart equivalent if possible.

delete(JSAny property) → JSBoolean

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Deletes the property with key property from this JSObject.

divide(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this / any in JavaScript.

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.

drawImageScaled(CanvasImageSource image, double dx, double dy, double dw, double dh) → void

Available on CanvasRenderingContext2D, provided by the CanvasRenderingContext2DGlue extension

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.

equals(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this == any in JavaScript.

exponentiate(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this ** any in JavaScript.

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.

get(String key) → Object?

Available on JSObject, provided by the JSObjectExtension extension

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.

getProperty<R extends JSAny?>(JSAny property) → R

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

The value of the property key property of this JSObject.

getTransform() → DOMMatrix

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

greaterThan(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this > any in JavaScript.

greaterThanOrEqualTo(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this >= any in JavaScript.

has(String property) → bool

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Shorthand helper for hasProperty to check whether this JSObject contains the property key property, but takes and returns a Dart value.

hasProperty(JSAny property) → JSBoolean

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Whether or not this JSObject contains the property key property.

instanceof(JSFunction constructor) → bool

Available on JSAny?, provided by the JSAnyUtilityExtension extension

Whether this JSAny? is an instanceof constructor.

instanceOfString(String constructorName) → bool

Available on JSAny?, provided by the JSAnyUtilityExtension extension

Whether this JSAny? is an instanceof the constructor that is defined by constructorName, which is looked up in the globalContext.

isA<T extends JSAny?>() → bool

Available on JSAny?, provided by the JSAnyUtilityExtension extension

Whether this JSAny? is an instance of the JavaScript type that is declared by T.

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.

lessThan(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this < any in JavaScript.

lessThanOrEqualTo(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this <= any in JavaScript.

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).

modulo(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this % any in JavaScript.

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.

multiply(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this * any in JavaScript.

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

notEquals(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this != any in JavaScript.

or(JSAny? any) → JSAny?

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this || any in JavaScript.

put(Object key, Object? value) → void

Available on JSObject, provided by the JSObjectExtension extension

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.

setFillColorRgb(int r, int g, int b, [num a = 1]) → void

Available on CanvasRenderingContext2D, provided by the CanvasRenderingContext2DExtension extension

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.

setProperty(JSAny property, JSAny? value) → void

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Write the value of property key property of this JSObject.

setStrokeColorRgb(int r, int g, int b, [num a = 1]) → void

Available on CanvasRenderingContext2D, provided by the CanvasRenderingContext2DExtension extension

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.

strictEquals(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this === any in JavaScript.

strictNotEquals(JSAny? any) → JSBoolean

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this !== any in JavaScript.

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.

subtract(JSAny? any) → JSAny

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this - any in JavaScript.

toMap() → Map<String, dynamic>

Available on JSObject, provided by the JSObjectExtension extension

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.

typeofEquals(String typeString) → bool

Available on JSAny?, provided by the JSAnyUtilityExtension extension

Whether the result of typeof on this JSAny? is typeString.

unsignedRightShift(JSAny? any) → JSNumber

Available on JSAny?, provided by the JSAnyOperatorExtension extension

The result of this >>> any in JavaScript.

Operators

operator ==(Object other) → bool

The equality operator.

inherited

operator [](String property) → JSAny?

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Shorthand helper for getProperty to get the value of the property key property of this JSObject, but takes a Dart value.

operator []=(String property, JSAny? value) → void

Available on JSObject, provided by the JSObjectUnsafeUtilExtension extension

Shorthand helper for setProperty to write the value of the property key property of this JSObject, but takes a Dart value.