Maintenance 2024

[samizdatco]

New Features

Website

• Documentation is now hosted at skia-canvas.org. Go there for a more readable version of all the details that used to be wedged into the README file.

Imagery

• Added initial SVG rendering support. Images can now load SVG files and can be drawn in a resolution-independent manner via drawImage() (thanks to @mpaperno Support SVG image rendering #180). Note that Images loaded from SVG files that don't have a width and height set on their root <svg> element have some quirks as of this release:
  • The Image object's width and height will both (misleadingly) report to be 150.
  • When passed to drawImage() without size arguments, the SVG will be scaled to a size that fits within the Canvas's current bounds (using an approach akin to CSS's object-fit: contain).
  • When using the 9-argument version of drawImage(), the ‘crop’ arguments (sx, sy, sWidth, & sHeight) will correspond to this scaled-to-fit size, not the Image's reported width & height.
• WEBP support
  • Canvas.saveAs() & toBuffer() can now generate WEBP images and Images can load WEBP files as well (contributed by @mpaperno Add WEBP support #177, h/t @revam for the initial work on this)
• Raw pixel data support
  • The toBuffer() and saveAs() methods now support "raw" as a format name and/or file extension, causing them to return non-encoded pixel data (by default in an "rgba" layout like a standard ImageData buffer)
  • Both functions now take an optional colorType argument to specify alternative pixel data layouts (e.g., "rgb" or "bgra")
• ImageData enhancements
  • The drawImage() and createPattern() methods have been extended to accept ImageData objects as arguments. Previously only putImageData() could be used for rendering, but this method ignores the context's current transform, filters, opacity, etc.
  • When creating an ImageData via the getImageData() & createImageData() methods or new ImageData() constructor, the optional settings arg now allows you to select the colorType for the buffer's pixels.

Typography

• FontLibrary.use() now supports dynamically loaded WOFF & WOFF2 fonts
• The outlineText() method now takes an optional width argument and supports all the context's typographic settings (e.g., .font, .fontVariant, .textWrap, .textTracking, etc.)
• Fonts with condensed/expanded widths can now be selected with the .fontStretch property. Note that stretch values included in the .font string will overwrite the current .fontStretch setting (or will reset it to normal if omitted).
• Generic font family names are now mapped to fonts installed on the system. The serif, sans-serif, monospace, and system-ui families are currently supported.
• Underlines, overlines, and strike-throughs can now be set via the Context's .textDecoration property.
• Text spacing can now be fine-tuned using the .letterSpacing and .wordSpacing properties.

GUI

• The Window class now has a resizable property which can be set to false to prevent the window from being manually resized or maximized (contributed by @nornagon add window.resizable property #124).
• Window event handlers now support Input Method Editor events for entering composed characters via the compositionstart, compositionupdate, & compositionend events. The input event now reports the composed character, not the individual keystrokes.

Rendering

• The Canvas object has a new engine property which describes whether the CPU or GPU is being used, which graphics device was selected, and what (if any) error prevented it from being initialized.
• The .transform and .setTransform methods on Context, Path2D, and CanvasPattern objects can now take their arguments in additional formats. They can now be passed a DOMMatrix object or a string with a list of transformation operations compatible with the CSS transform property. The DOMMatrix constructor also supports these strings as well as plain, matrix-like objects with numeric attributes named a, b, c, d, e, & f (contributed by @mpaperno Allow .transform() to take DOMMatrix or CSS transform strings as arguments #178).
• The number of background threads used for asynchronous exports can now be controlled with the SKIA_CANVAS_THREADS environment variable

Breaking Changes

• An upgrade to Neon with N-API v8 raised the minimum required Node version to 12.22+, 14.17+, or 16+.
• Images now load asynchronously in cases where the src property has been set to a local path. As a result, it's now necessary to await img.decode() or set up an .on("load", …) handler before drawing it—even when the src is non-remote.
• The KeyboardEvent object returned by the keyup/keydown and input event listeners now has fields and values consistent with browser behavior. In particular, code is now a name (e.g., ShiftLeft or KeyS) rather than a numeric scancode, key is a straightforward label for the key (e.g., Shift or s) and the new location field provides a numeric description of which variant of a key was pressed.
• The deprecated .async property has been removed. See the v0.9.28 release notes for details.
• The non-standard .textTracking property has been removed in favor of the new .letterSpacing property

Bugfixes

• Initializing a GPU-renderer using Vulkan now uses the vulkano crate and makes better selections among devices present (previously it was just using the first result, which is not always optimal).
• The Image.onload callback now properly sets this to point to the new image (contributed by @mpaperno & @ForkKILLET).
• Creating a Window with fullscreen set to true now takes effect immediately (previously it was failing silently)
• Drawing paths after setting an invalid transform no longer crashes (contributed by @mpaperno Fix exception in canvas::draw_path() when trying to draw a path with an invalid transform matrix. #175)
• Windows with .on("draw") handlers no longer become unresponsive on macOS 14+ after being fully occluded by other windows
• Ellipses with certain combinations of positive and negative start- and stop-angles now render correctly—previously they would not appear at all if the total sweep exceeded 360° (contributed by @mpaperno Fix issue in Path2D::add_ellipse() where trying to draw a complete circle from certain angle combinations produced nothing. #176)
• The drawCanvas() method now clips to the specified crop size (contributed by @mpaperno Fix clipping not being applied to the source in drawCanvas() 9-argument version #179)
• Hit-testing with isPointInPath and isPointInStroke now works correctly when called with a Path2D object as the first argument

Misc. Improvements

• Upgraded Skia to milestone 129
• Added TypeScript definitions for the Window object’s event types (contributed by @saantonandre EventEmitter intellisense/type safety #163) and the roundRect method (contributed by @sandy85625 & @santilema)
• Performance improvements to FontLibrary, speeding up operations like listing families and adding new typefaces.
• Updated winit and replaced the end-of-life’d skulpin-based Vulkan renderer with a new implementation using Vulkano for window-drawing on Windows and Linux.

  It’s a fairly direct adaptation of Vulkano sample code for device setup with skia-specific rendering routines inspired by @pragmatrix’s renderer for emergent. All of which is to say, if you understand this better than I do I'd love some suggestions for improving the rendering setup.

• The GPU is now initialized only when it is needed, not at startup. As a result, setting that Canvas's .gpu property to false immediately after creation will prevent any GPU-related resource acquisition from occurring (though rendering speed will be predictably slower).
• The sample-count used by the GPU for multiscale antialiasing can now be configured through the optional msaa export argument. If omitted, defaults to 4x MSAA.
• Added support for non-default imports (e.g., import {Image} from "skia-canvs") when used as an ES Module.
• The getImageData() method now makes use of the GPU (if enabled) and caches data between calls, greatly improving performance for sequential queries