Build a canvas of width x height points, defaulting to the browser's
own 300 x 150.
The third argument is this library's: it fixes the pixel format, the color space and the renderer for the canvas's whole life, none of which an export can change afterwards. See CanvasOptions.
const canvas = new Canvas(512, 512, { colorSpace: "display-p3" })
The options argument is this library's own; a browser configures none of this on the element.
Optionalwidth: numberOptionalheight: numberOptionaloptions: CanvasOptionsReadonlycolorThe color space this canvas composites in, as passed to the constructor
and normalized to its canonical name -- "p3" reads back as
"display-p3". Exports and getImageData inherit it unless the call
names its own, which is what a browser does.
🧪 Not in the HTML Canvas standard.
ReadonlycolorThe pixel format this canvas was constructed with ("rgba" by default).
Exports and getImageData inherit it unless the call names its own.
🧪 Not in the HTML Canvas standard.
StaticcontextsEvery canvas's page list, keyed by canvas. This is the live array rather than a copy, so it grows as pages are added -- and it holds them newest first, the reverse of the order Canvas.pages hands back.
🧪 Not in the HTML Canvas standard.
ReadonlyengineWhich backend took this canvas, and what it is -- see
EngineDetails. backend() answers the same question about the
machine rather than about one canvas.
🧪 Not in the HTML Canvas standard.
Gets or sets the height of a canvas element on a document.
ReadonlypagesEvery page added so far, oldest first, each as the context that draws it. The last entry is the current page.
🧪 Not in the HTML Canvas standard.
Gets or sets the width of a canvas element on a document.
Whether this canvas is rasterizing on the GPU.
Reports the engine it settled on, not the one asked for, so a float
canvas reads false on a machine with a working GPU. Assigning moves an
existing canvas between the two, and is ignored where the engine asked
for is not available.
🧪 Not in the HTML Canvas standard.
Asks for the GPU or the CPU. Reading it back reports what was actually available, which may not be what was asked for.
🧪 Not in the HTML Canvas standard.
The current page as a JPEG at the default quality of 0.92. Shorthand for
toBuffer("jpg").
🧪 Not in the HTML Canvas standard.
The canvas as a PDF, every page included. Shorthand for
toBuffer("pdf").
🧪 Not in the HTML Canvas standard.
The current page as a PNG. Shorthand for toBuffer("png").
🧪 Not in the HTML Canvas standard.
The canvas's pixels, unencoded, laid out as its own
Canvas.colorType says. Shorthand for toBuffer("raw").
🧪 Not in the HTML Canvas standard.
The current page as an SVG document. Shorthand for toBuffer("svg").
🧪 Not in the HTML Canvas standard.
The canvas as a WebP -- an animation where it has more than one page,
timed at the default 30fps. Shorthand for toBuffer("webp").
🧪 Not in the HTML Canvas standard.
Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
The type of canvas to create. Skia Canvas only supports a 2-D context using canvas.getContext("2d")
The argument is required: the runtime returns null for anything other
than "2d", including no argument at all, so declaring it optional
promised a context that would not arrive.
Add a page, and return its drawing context.
Pages stay drawable once added, and which of them an export takes
depends on the format and the filename. PDF, TIFF, ICO and the three
animated formats gather every page into one file; the rest write the
current page alone, unless the filename passed to toFile contains
"{}", which writes one numbered file per page.
The size is a pair or nothing: omit both to keep the canvas's current size, or give both to resize the canvas for this page onward. Earlier pages keep the size they were created at. Passing only a width throws, rather than adding a page at a size nobody asked for.
🧪 Not in the HTML Canvas standard.
Add a page, and return its drawing context.
Pages stay drawable once added, and which of them an export takes
depends on the format and the filename. PDF, TIFF, ICO and the three
animated formats gather every page into one file; the rest write the
current page alone, unless the filename passed to toFile contains
"{}", which writes one numbered file per page.
The size is a pair or nothing: omit both to keep the canvas's current size, or give both to resize the canvas for this page onward. Earlier pages keep the size they were created at. Passing only a width throws, rather than adding a page at a size nobody asked for.
🧪 Not in the HTML Canvas standard.
Encode the canvas and hand the result to a callback as a Blob.
Callback-style and returning void, as the standard defines it, rather
than the promise the other exporters on this class return. type is a
mime type -- "image/png" -- not the bare format name they take.
A failed encode calls back with null rather than raising: the callback
has already been handed off by the time the encode runs.
Optionaltype: stringOptionalquality: numberRender the canvas and resolve with the encoded bytes.
format is an extension ("png") or a mime type ("image/png"), and
may carry an @2x suffix to set RenderOptions.density. "raw"
returns the pixels themselves, laid out as
ExportOptions.colorType says.
🧪 Not in the HTML Canvas standard.
Optionaloptions: ExportOptionsCanvas.toBuffer without the promise: it blocks and returns the encoded bytes.
🧪 Not in the HTML Canvas standard.
Optionaloptions: ExportOptionsformat accepts a bare extension ("png") or a mime type
("image/png"), and defaults to PNG as in the browser.
Optionalformat: stringOptionalquality: numberRender the canvas and write it to disk, resolving once the file is closed.
The format comes from the filename's extension unless options.format
names one, which is what to use when the name cannot carry an extension.
A URL is accepted in place of a path, and must use the file:
protocol.
A filename containing "{}" writes one numbered file per page --
"page-{}.png" gives page-1.png onward -- and a number between the
braces is the zero-padded width, so "frame-{4}.png" gives
frame-0001.png. Without the braces, a format that gathers pages writes
all of them into the one file and the rest write the current page alone.
An @2x suffix on the filename sets RenderOptions.density, so
"chart@2x.png" is the same call as { density: 2 }.
await canvas.toFile("chart.png")
await canvas.toFile("frames-{4}.png", { density: 2 })
🧪 Not in the HTML Canvas standard.
Optionaloptions: SaveOptionsCanvas.toFile without the promise: it blocks until the file is written.
Identical arguments and identical rules for formats, page selection and
"{}" numbering. Rendering no longer overlaps with anything else, which
is what the asynchronous form buys.
🧪 Not in the HTML Canvas standard.
Optionaloptions: SaveOptionsHand the canvas's pixels to a Sharp image, for the processing and optimization that library offers.
Sharp is an optional peer dependency and must be installed separately;
this throws if it is missing. The returned object is ready
synchronously, but most operations on it are themselves asynchronous.
The image carries a density of 72 * density dpi.
await canvas.toSharp().heif({ compression: "hevc" }).toFile("out.heif")
🧪 Not in the HTML Canvas standard.
Optionaloptions: RenderOptionsCanvas.toSharp without the intermediate stream: the pixels are already in hand, so they are handed to Sharp directly. Same arguments, same result.
🧪 Not in the HTML Canvas standard.
Optionaloptions: RenderOptionsRender the canvas and resolve with a data: URL -- the same bytes
Canvas.toBuffer returns, base64-encoded behind the format's mime
type, ready for an <img src> or a CSS url().
Base64 costs a third more bytes than the buffer it wraps.
🧪 Not in the HTML Canvas standard.
Optionaloptions: ExportOptionsCanvas.toURL without the promise: it blocks and returns the
data: URL.
🧪 Not in the HTML Canvas standard.
Optionaloptions: ExportOptions
A stand-in for the HTML
<canvas>element: it holds the image dimensions, hands out a CanvasRenderingContext2D to draw with, and encodes what was drawn to a file, a buffer, or a string.Rendering is deferred until an export is asked for, and runs on a background thread, so the asynchronous exporters are the ones to prefer where several images are being produced at once.
MDN Reference