v3.0

[samizdatco]

Skia Canvas is a Node.js implementation of the HTML Canvas drawing API for both on- and off-screen rendering. Since it uses Google’s Skia graphics engine, its output is very similar to Chrome’s <canvas> element — though it's also capable of things the browser’s Canvas still can't achieve.

See the project website for details and documentation.

Changes in Version 3.0

New Features

GUI

• The App global now has an eventLoop property which can be set to:
  • "native" (the default) in which case the Node event loop is suspended while the OS handles displaying GUI windows
  • "node" where the Node event loop maintains control (allowing setInterval and setTimeout to run) and handles GUI events manually every few milliseconds (though note some of the caveats associated with the Winit feature this uses).
• Window objects now have a read-only closed property and emit a close event when they are closed. Closed windows can later be re-opened by calling the new open() method.
• The new borderless attribute allows Window titlebars and borders to be hidden (thanks to @hydroperx Window#decorations #230)

Imagery

• The loadImage() and loadImageData() helpers now use node-fetch to handle web requests and can accept a fetch options object as the final argument.
• Image objects can now be created by passing a Buffer or dataURL-containing string as a constructor argument and will be immeditately drawable (no asynchronous loading required).
• Added support for integrating the Sharp image processor into canvas workflows (if the sharp npm module has been installed):
  • The new Canvas.toSharp() & ImageData.toSharp() convenience methods convert their contents to a Sharp bitmap object
  • loadImage() & loadImageData() can now be called with a Sharp object as their sole argument
  • The src property on a new Image object can be set to a Sharp object and it will begin asynchronously loading
• Added new options to createTexture() for setting the line cap style and selecting whether vector patterns should be clipped or outlined

Rendering

• Significant speed-ups for deeply layered drawing in which the canvas isn't cleared or reset (potentially resulting in numerous vector objects being re-drawn despite being hidden by shapes drawn on top):
  • The bitmap generated by getImageData()/toBuffer()/toFile() is now cached. When called repeatedly, only newly added drawing commands will need to be rasterized (and will be layered atop the bitmap saved in the prior call).
  • Window contents are now cached between screen refreshes, improving performance during resizing and in cases where the canvas is drawn to in multiple passes and not cleared with every frame
  • Calling clearRect() or fillRect() with an area that covers the canvas now erases all the vector shapes below
• The toFile(), toBuffer(), and toDataURL() methods now accept an optional downsample flag (for jpegs only), which enables 4:2:0 chroma-subsampling. By default, no subsampling (a.k.a. 4:4:4) will be performed
• The getImageData() method now accepts additional rendering arguments (density, matte, and msaa) which behave the same as their equivalents in the toFile() method.
• Drawing one canvas onto another (via drawImage or drawCanvas) now uses significantly less memory and CPU, especially when drawing from a subregion of the source canvas

Typography

• Text lightness can now be fine-tuned through a pair of optional arguments that can be passed to the Canvas or Window constructors:
  • textContrast — a number in the range 0.0–1.0 controlling the amount of additional weight to add (defaults to 0.0)
  • textGamma — a number in the range 0.0–4.0 controlling how glyph edges are blended with the background (defaults to 1.4)
• The textAlign attribute can now be set to "justify"
• measureText() has been rewritten to calculate metrics based not just on the font specified in font but also any fallback fonts that were used for character glyphs not present in the ‘main’ font. The line-by-line measurements now include a runs array with bounds and metrics for each single-font range of characters on the line.

Supported Platforms

• Added precompiled binaries for Arm-based Windows systems
• Now providing pre-built ‘layer’ archives for use with AWS Lambda (for Node v20 and above)
• Linux builds now include a statically linked version of fontconfig. As a result:
  • libfontconfig packages no longer need to be installed on the host system using apt, apk, yum, dnf, etc.
  • it now runs on ‘serverless’ platforms like Vercel without modification (sadly Cloudflare doesn't support native modules at all though)

Breaking Changes

• Renamed export functions and options to be more consistent with similar browser APIs and other Node modules:
  • saveAs() and saveAsSync() are now called toFile() and toFileSync()
  • toDataURL() now behaves the same as its browser equivalent: it is synchronous and its only configuration option is a numerical quality setting
  • toDataURLSync() has been removed
  • toURL() and toURLSync() produce data URLs and support the same enhanced export options as toBuffer
• When exporting to an SVG, text is now converted to paths only if the outline option is set to true
• The FontLibrary.use() method no longer expands glob patterns (allowing Skia Canvas to drop its fast-glob dependency). If you want the old behavior, try adding the fast-glob or glob modules to your package and using them like this.

Misc. Improvements

• Significantly reduced external dependencies (cutting the number of node_modules directories installed from 83 to 8 for the published module and 312 to 22 when including dev dependencies)
• App.launch() now returns a Promise that resolves when the final window is closed, allowing you to schedule code to run before the process would otherwise exit (see also the new idle event which fires under the same circumstances).
• input event objects now contain an inputType property to distinguish between insertion, deletion, and IME composition
• Mouse events are no longer coalesced down to a single instance per frame (most relevant for mousemove events)
• Mouse events now include a standard buttons attribute
• DPI metadata is now included in webp files (reflecting the density option passed to toFile() or toBuffer())
• Argument validation now emulates browser behavior much more closely—including converting what were previously TypeErrors in certain cases into silent failures. To reënable these errors, set the SKIA_CANVAS_STRICT environment variable to 1 or true.
• loadImage(), loadImageData(), and Image.src can now accept URL objects (using http(s), file, or data protocols). Likewise, toFile() now accepts file: URLs (allowing relative paths to be constructed with import.meta.url)
• The Canvas constructor's options argument can now contain a gpu property which can be set to false in order to use CPU-based rendering

Bugfixes

• Setting a window's cursor property to "none" now hides the cursor
• Spurious moved window events are no longer emitted during resizes
• resize events now update the window object’s width & height properties in addition to providing the new size in the event object
• roundRect() now reflects context's current transform state and accepts plain {x, y} objects for corner-radii in addition to Numbers and DOMPoints (thanks to @mpaperno Accept any {x:number, y:number} object when parsing corner radii #223)
• Angles passed to createConicGradient() are no longer incorrectly offset by 90°
• Calling lineTo on an empty Path2D no longer adds a line from the origin to the specified coordinates: it now acts as if it were a moveTo
• measureText() now correctly calculates widths when letterSpacing has been set
• startRange and endRange in TextMetrics.lines[] now correspond to character indices in the string passed to measureText(), not byte indices into the UTF-8 buffer backing it

Full Changelog: v2.0.2...v3.0.8

[seanghay]

I've been waiting for this. I made a simple text layout engine on top of skia-canvas. https://github.com/seanghay/sone