skia-canvas
Advanced tools
Skia Canvas is a browser-less implementation of the HTML Canvas drawing API for Node.js. It is based on Google’s Skia graphics engine and, accordingly, produces very similar results to Chrome’s <canvas> element. The library is well suited for use on desktop machines where you can render hardware-accelerated graphics to a window and on the server where it can output a variety of image formats.
While the primary goal of this project is to provide a reliable emulation of the standard API according to the spec, it also extends it in a number of areas to take greater advantage of Skia's advanced graphical features and provide a more expressive coding environment.
In particular, Skia Canvas:
If you’re running on a supported platform, installation should be as simple as:
npm install skia-canvas
This will download a pre-compiled library from the project’s most recent release.
The underlying Rust library uses N-API v8 which allows it to run on Node.js versions:
Pre-compiled binaries are available for:
Nearly everything you need is statically linked into the library. A notable exception is the Fontconfig library which must be installed separately if you’re running on Linux.
The library is compatible with Linux systems using glibc 2.28 or later as well as Alpine Linux (x64 & arm64) and the musl C library it favors. In both cases, Fontconfig must be installed on the system for skia-canvas to operate correctly.
If you are setting up a Dockerfile that uses node as its basis, the simplest approach is to set your FROM image to one of the (Debian-derived) defaults like node:lts, node:18, node:16, node:14-buster, node:12-buster, node:bullseye, node:buster, or simply:
FROM node
You can also use the ‘slim’ image if you manually install fontconfig:
FROM node:slim
RUN apt-get update && apt-get install -y -q --no-install-recommends libfontconfig1
If you wish to use Alpine as the underlying distribution, you can start with something along the lines of:
FROM node:alpine
RUN apk update && apk add fontconfig
If prebuilt binaries aren’t available for your system you’ll need to compile the portions of this library that directly interface with Skia.
Start by installing:
rustupDetailed instructions for setting up these dependencies on different operating systems can be found in the ‘Building’ section of the Rust Skia documentation. Once all the necessary compilers and libraries are present, running npm run build will give you a usable library (after a fairly lengthy compilation process).
When rendering canvases in the background (e.g., by using the asynchronous saveAs or toBuffer methods), tasks are spawned in a thread pool managed by the rayon library. By default it will create up to as many threads as your CPU has cores. You can see this default value by inspecting any Canvas object's engine.threads property. If you wish to override this default, you can set the SKIA_CANVAS_THREADS environment variable to your preferred value.
For example, you can limit your asynchronous processing to two simultaneous tasks by running your script with:
SKIA_CANVAS_THREADS=2 node my-canvas-script.js
import {Canvas} from 'skia-canvas'
let canvas = new Canvas(400, 400),
ctx = canvas.getContext("2d"),
{width, height} = canvas;
let sweep = ctx.createConicGradient(Math.PI * 1.2, width/2, height/2)
sweep.addColorStop(0, "red")
sweep.addColorStop(0.25, "orange")
sweep.addColorStop(0.5, "yellow")
sweep.addColorStop(0.75, "green")
sweep.addColorStop(1, "red")
ctx.strokeStyle = sweep
ctx.lineWidth = 100
ctx.strokeRect(100,100, 200,200)
// render to multiple destinations using a background thread
async function render(){
// save a ‘retina’ image...
await canvas.saveAs("rainbox.png", {density:2})
// ...or use a shorthand for canvas.toBuffer("png")
let pngData = await canvas.png
// ...or embed it in a string
let pngEmbed = `<img src="${await canvas.toDataURL("png")}">`
}
render()
// ...or save the file synchronously from the main thread
canvas.saveAsSync("rainbox.pdf")
import {Canvas} from 'skia-canvas'
let canvas = new Canvas(400, 400),
ctx = canvas.getContext("2d"),
{width, height} = canvas
for (const color of ['orange', 'yellow', 'green', 'skyblue', 'purple']){
ctx = canvas.newPage()
ctx.fillStyle = color
ctx.fillRect(0,0, width, height)
ctx.fillStyle = 'white'
ctx.arc(width/2, height/2, 40, 0, 2 * Math.PI)
ctx.fill()
}
async function render(){
// save to a multi-page PDF file
await canvas.saveAs("all-pages.pdf")
// save to files named `page-01.png`, `page-02.png`, etc.
await canvas.saveAs("page-{2}.png")
}
render()
import {Window} from 'skia-canvas'
let win = new Window(300, 300)
win.title = "Canvas Window"
win.on("draw", e => {
let ctx = e.target.canvas.getContext("2d")
ctx.lineWidth = 25 + 25 * Math.cos(e.frame / 10)
ctx.beginPath()
ctx.arc(150, 150, 50, 0, 2 * Math.PI)
ctx.stroke()
ctx.beginPath()
ctx.arc(150, 150, 10, 0, 2 * Math.PI)
ctx.stroke()
ctx.fill()
})
This project is deeply indebted to the work of the Rust Skia project whose Skia bindings provide a safe and idiomatic interface to the mess of C++ that lies underneath. Many thanks to the developers of node-canvas for their terrific set of unit tests. In the absence of an Acid Test for canvas, these routines were invaluable.
© 2020–2024 Samizdat Drafting Co.
📦 ⟩ [v2.0.0] ⟩ Dec 2, 2024
drawImage()][mdn_drawImage] (thanks to @mpaperno #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:
height will report being 150 and the width will be set to accurately capture the image's aspect ratiodrawImage() 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).drawImage(), the ‘crop’ arguments (sx, sy, sWidth, & sHeight) will correspond to this scaled-to-fit size, not the Image's reported width & height.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][ImageData] buffer)colorType][colorType] argument to specify alternative pixel data layouts (e.g., "rgb" or "bgra")new ImageData() constructor, the optional settings arg now allows you to select the colorType for the buffer's pixels.outlineText()][outline_text] method now takes an optional width argument and supports all the context's typographic settings (e.g., .font, .fontVariant, .textWrap, .textTracking, etc.).fontStretch][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).serif, sans-serif, monospace, and system-ui families are currently supported..textDecoration property..letterSpacing][letterSpacing] and [.wordSpacing][wordSpacing] properties.resizable][resizable] property which can be set to false to prevent the window from being manually resized or maximized (contributed by @nornagon #124).input][input] event now reports the composed character, not the individual keystrokes.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..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][DOMMatrix] object or a string with a list of transformation operations compatible with the [CSS transform][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 #178).SKIA_CANVAS_THREADS][multithreading] environment variablesrc 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.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][key_location] field provides a numeric description of which variant of a key was pressed..async property has been removed. See the v0.9.28 release notes for details..textTracking property has been removed in favor of the new [.letterSpacing][letterSpacing] propertyvulkano crate and makes better selections among devices present (previously it was just using the first result, which is not always optimal).this to point to the new image (contributed by @mpaperno & @ForkKILLET).fullscreen set to true now takes effect immediately (previously it was failing silently).on("draw") handlers no longer become unresponsive on macOS 14+ after being fully occluded by other windowsdrawCanvas() method now clips to the specified crop size (contributed by @mpaperno #179)isPointInPath][isPointInPath()] and [isPointInStroke][isPointInStroke()] now works correctly when called with a Path2D object as the first argumentroundRect method (contributed by @sandy85625 & @santilema)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][vulkano_demo] for device setup with skia-specific rendering routines inspired by @pragmatrix’s renderer for [emergent][pragmatrix_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.
.gpu][canvas_gpu] property to false immediately after creation will prevent any GPU-related resource acquisition from occurring (though rendering speed will be predictably slower).msaa][msaa] export argument. If omitted, defaults to 4x MSAA.import {Image} from "skia-canvas") when used as an ES Module.FAQs
A GPU-accelerated Canvas Graphics API for Node
The npm package skia-canvas receives a total of 11,956 weekly downloads. As such, skia-canvas popularity was classified as popular.
We found that skia-canvas demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.