ReadonlycanvasColor filter applied during drawing. Set null to disable.
🧪 Not in the HTML Canvas standard.
Dither draws to break up banding in gradients and dark frames on
8-bit surfaces. Mirrors CanvasKit's Paint.setDither. Not part of
the HTML Canvas standard. Default false.
🧪 Not in the HTML Canvas standard.
Solid color, gradient, pattern, or texture used for fills.
Color inputs follow the [Color4fInput] convention:
"#ff8800", "rgb(...)", named colors) is parsed as
sRGB-gamma.[r, g, b, a] array carries premultiplied linear-light floats
interpreted in the surface's working color space; pass these to avoid
the lossy sRGB-encoding round-trip used by the CSS form (the shape
mirrors TextStyleInput.color and CanvasKit's Paint.setColor).🧪 Not in the HTML Canvas standard.
🧪 Not in the HTML Canvas standard.
The capitalization axis of CanvasRenderingContext2D.fontVariant.
This is the CSS longhand and fontVariant the shorthand, so writing here
replaces only the caps token and leaves the other axes -- figures,
ligatures, alternates -- as they were. An unrecognised value is ignored,
as the standard requires of an attribute setter.
🧪 Not in the HTML Canvas standard.
Image filter applied during drawing. Set null to disable.
🧪 Not in the HTML Canvas standard.
🧪 Not in the HTML Canvas standard.
🧪 Not in the HTML Canvas standard.
Coverage-mask filter (styled blur) applied during drawing -- glows, feathered edges, outline blur. Set null to disable.
🧪 Not in the HTML Canvas standard.
Solid color, gradient, pattern, texture, or shader used for strokes. See
fillStyle for the color-input contract.
🧪 Not in the HTML Canvas standard.
🧪 Not in the HTML Canvas standard.
The context's current transformation matrix, as an alternative to
getTransform() and setTransform().
The setter takes anything new DOMMatrix() does -- a matrix, a CSS
transform string, an {a, b, c, d, e, f} object, or a 6- or 16-element
array -- and replaces the transform rather than multiplying into it.
🧪 Not in the HTML Canvas standard.
Replaces the current transform, accepting the same matrix forms CanvasTransform.setTransform does.
🧪 Not in the HTML Canvas standard.
Clips to path rather than to the path currently being built.
OptionalfillRule: CanvasFillRuleCurve to (x, y), pulled toward the control point.
weight sets how close the curve comes: 0 draws a straight line, 1
matches quadraticCurveTo, and larger values pull it nearer the control
point.
🧪 Not in the HTML Canvas standard.
The optional fourth argument is this library's own: the Canvas API always sweeps a full turn, and Skia can sweep any arc. Omitting it draws exactly what a browser draws.
OptionalendAngle: numberOptionalsettings: ImageDataSettings🧪 Not in the HTML Canvas standard.
Optionalbasis: QuadOrRect🧪 Not in the HTML Canvas standard.
Optionaloptions: CreateTextureOptionsDraw another canvas, replaying its contents as vectors.
Unlike CanvasRenderingContext2D.drawImage, which rasterizes the source first, this keeps text as text and paths as paths -- so an SVG or PDF export of the result stays selectable and scalable.
The replay is clipped to the destination rectangle, so anything that
spreads -- an imageFilter blur, a shadow -- stops at its edge instead of
bleeding past it the way it does through drawImage. Give the destination
room if you want the spread. This is inherited behaviour, matching
upstream, not a rule the Canvas standard sets: drawCanvas has no
standard counterpart, and drawImage does let a filter spread.
🧪 Not in the HTML Canvas standard.
As above, scaled to fill the dw by dh rectangle at (dx, dy), and
clipped to it.
🧪 Not in the HTML Canvas standard.
As above, replaying only the sw by sh region of image at
(sx, sy) into the destination rectangle.
🧪 Not in the HTML Canvas standard.
Draws image at its natural size, with its top-left corner at
(dx, dy).
Draws image scaled to fill the dw by dh rectangle at (dx, dy).
Draws the sw by sh region of image at (sx, sy), scaled to fill
the dw by dh rectangle at (dx, dy).
Paints a laid-out Paragraph with its top-left corner at (x, y).
This is the only way to render a Paragraph; the rest of that API builds
and measures one. Rich text, per-span styling, strut-controlled leading
and inline placeholders all arrive through here rather than through
CanvasRenderingContext2D.fillText.
Three differences from fillText that are easy to trip over:
(x, y) is the top-left of the text block, not a baseline. The
same coordinates passed to fillText put the text roughly one line
higher.fillStyle. Setting
fillStyle before the call changes nothing; colour, opacity and
decoration are whatever the TextStyleInput carried.globalAlpha fades it and
globalCompositeOperation composites it. Before 4.2.0 both were
dropped, and every blend mode behaved as source-over.const builder = ParagraphBuilder.Make({
textAlign: "center",
textStyle: { fontSize: 18, color: [0, 0, 0, 1] },
});
builder.addText("Wrapped, styled, measured text.");
const paragraph = builder.build();
paragraph.layout(320); // wrap width, in pixels
ctx.drawParagraph(paragraph, 20, 20);
🧪 Not in the HTML Canvas standard.
Optionalcounterclockwise: booleanFills path rather than the path currently being built.
OptionalfillRule: CanvasFillRuleOptionalsettings: ImageDataExportSettingsAlways false.
Context loss is a GPU-compositor event -- a browser reclaiming the backing store of a backgrounded tab -- and there is no compositor here. A canvas either has its surface or its construction failed.
Hit-tests against path rather than the path currently being built.
OptionalfillRule: CanvasFillRuleHit-tests the stroked outline of path rather than of the path currently
being built.
As above, writing only the dirtyWidth by dirtyHeight region of
imagedata at (dirtyX, dirtyY) rather than all of it.
Optionalradii: number | DOMPointInit | (number | DOMPointInit)[]Push an isolated compositing layer (CanvasKit saveLayer). Draws
until the matching restore() accumulate into the layer, which is
then composited onto the canvas at alpha (default 1) with the
current globalCompositeOperation. bounds is an optional
[x, y, w, h] that clips the layer -- Skia describes it as a
sizing hint for the offscreen, but nothing outside it is drawn.
backdrop applies an ImageFilter to the content behind the layer
(blur-behind / frosted glass). Not part of the HTML Canvas standard.
🧪 Not in the HTML Canvas standard.
Optionalalpha: numberOptionalbounds: [number, number, number, number] | nullOptionalbackdrop: ImageFilter | nullReplaces the transform with transform, or resets it when nothing is
given.
The matrix forms are this fork's extension: the standard takes six
numbers, and these also accept a DOMMatrix, a matrix-like object or a
CSS transform string.
Optionaltransform: MatrixAs above, multiplying transform into the current transform rather than
naming its six components.
The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a