@napi-rs/canvas
High-performance canvas for Node.js using Skia rendering backend.
3D and graphics npm MIT
How @napi-rs/canvas is used
@napi-rs/canvas is a dependency in 27 of the 6,208 public GitHub projects set up for AI coding agents that we scanned (0.6% of the 4,818 JavaScript/TypeScript ones), #5 of 52 in 3d and graphics. The most used alternative in our scan is Three.js (145 projects). Projects that use it most often also use PDF.js (85.2%), tsx (85.2%), Vitest (85.2%). It is more common in projects set up for OpenClaw (5.9%) than for GitHub Copilot (0.2%).
@napi-rs/canvas popularity over time
Gid Score 59: downloads 91, use in agent projects 40, GitHub stars 26, downloads trend 68 (each 0-100). How it is calculated.
Often used with @napi-rs/canvas
| PDF.js | 85.2% of @napi-rs/canvas projects · 62.2× more than average |
|---|---|
| tsx | 85.2% of @napi-rs/canvas projects · 5.6× more than average |
| Vitest | 85.2% of @napi-rs/canvas projects · 4.1× more than average |
| dotenv | 81.5% of @napi-rs/canvas projects · 5.2× more than average |
| Zod | 88.9% of @napi-rs/canvas projects · 3.6× more than average |
| ws | 74.1% of @napi-rs/canvas projects · 23.6× more than average |
| Sharp | 70.4% of @napi-rs/canvas projects · 15.0× more than average |
| yaml | 70.4% of @napi-rs/canvas projects · 22.6× more than average |
By coding agent
| Claude Code | 0.7% of projects set up for it |
|---|---|
| OpenClaw | 5.9% of projects set up for it |
| Gemini CLI | 1.9% of projects set up for it |
| Cursor | 0.3% of projects set up for it |
| GitHub Copilot | 0.2% of projects set up for it |
Share of public repos configured for each agent that list @napi-rs/canvas as a dependency.
What @napi-rs/canvas projects add to it
Share of the 27 public projects built with AI coding agents that use @napi-rs/canvas and also depend on each package. From our scan of 6,208 repos, updated Oct 20, 2026.
| Schema validation zod | 73.5% | |
|---|---|---|
| PDF parsing and rendering pdfjs-dist | 67.3% | |
| TypeScript runner tsx | 67.3% | |
| Test runner vitest | 67.3% | |
| Env file loader dotenv | 67.3% | |
| WebSocket library ws | 59.2% | |
| Image processing sharp | 55.1% | |
| YAML parser yaml | 49.0% |
Using @napi-rs/canvas with an AI coding agent
Rules to paste into AGENTS.md or CLAUDE.md
Our summary of the project's own guidance. [1] Which file does your agent read?
## @napi-rs/canvas
- Import from `@napi-rs/canvas`. Create a surface with `createCanvas(width, height)` and draw through `canvas.getContext('2d')`.
- Export with `await canvas.encode('png')`. JPEG, AVIF and WebP are also supported, and the README says encoding runs in the libuv thread pool without blocking. The README's emoji example also uses `canvas.toBuffer('image/png')`.
- Call `await loadImage(...)` with a disk path or URL before passing the result to `ctx.drawImage`.
- Register fonts with `GlobalFonts.registerFromPath(file, familyName)` before setting `ctx.font` to that family name.
- On Linux, require glibc >= 2.18. On AWS Lambda, attach a layer from Canvas-Lambda-Layer and exclude `@napi-rs/canvas` from the bundle.
- For Lottie, load with `LottieAnimation.loadFromFile` or `loadFromData(json, { resourcePath })`, call `seekFrame(n)` or `seek(seconds)`, then call `animation.render(ctx)`.
- For path geometry, use the `Path2D` PathKit methods (`op`, `simplify`, `asWinding`, `toSVGString`). Do not trust the README's one-line descriptions of `PathOp` values; check the output.
Minimal code example: draw a house, add images, export png
const { promises } = require('node:fs')
const { join } = require('node:path')
const { createCanvas, loadImage } = require('@napi-rs/canvas')
const canvas = createCanvas(300, 320)
const ctx = canvas.getContext('2d')
ctx.lineWidth = 10
ctx.strokeStyle = '#03a9f4'
ctx.fillStyle = '#03a9f4'
// Wall
ctx.strokeRect(75, 140, 150, 110)
// Door
ctx.fillRect(130, 190, 40, 60)
// Roof
ctx.beginPath()
ctx.moveTo(50, 140)
ctx.lineTo(150, 60)
ctx.lineTo(250, 140)
ctx.closePath()
ctx.stroke()
async function main() {
// load images from disk or from a URL
const catImage = await loadImage('path/to/cat.png')
const dogImage = await loadImage('https://example.com/path/to/dog.jpg')
ctx.drawImage(catImage, 0, 0, catImage.width, catImage.height)
ctx.drawImage(dogImage, canvas.width / 2, canvas.height / 2, dogImage.width, dogImage.height)
// export canvas as image
const pngData = await canvas.encode('png') // JPEG, AVIF and WebP are also supported
// encoding in libuv thread pool, non-blocking
await promises.writeFile(join(__dirname, 'simple.png'), pngData)
}
main()Code: MIT, © Brooooooklyn, from the project README [1]
What @napi-rs/canvas is
@napi-rs/canvas is a canvas implementation for Node.js. The README calls it a "Google Skia binding to Node.js via Node-API" and promises "0 System dependencies!". The repository describes it as a "High performance Skia canvas implementation". It is MIT licensed and was created on 2020-08-30. Release names carry Skia hashes; the latest listed is skia-95ee33d7-fcf7328d.
The drawing API follows the browser canvas. You call createCanvas(width, height), get a '2d' context, then draw shapes, text and images. loadImage takes a disk path or a URL. await canvas.encode('png') returns the image data. A README comment says JPEG, AVIF and WebP are also supported. Custom fonts, including color emoji and COLRv1 fonts, are registered with GlobalFonts.registerFromPath.
Past the standard API, Path2D carries Skia PathKit methods for boolean operations, simplification and SVG output. A LottieAnimation class renders Lottie files frame by frame. The README's examples draw a house to PNG, render emoji text, rasterize a tiger and an SVG illustration, and feed Lottie frames to a video encoder. [1][2][3]
Why teams pick it
- No system libraries to set up. The README says "0 System dependencies!" and the repository description says "Zero system dependencies". For installation, the README shows only
yarn add @napi-rs/canvasornpm install @napi-rs/canvas. [1] - Non-blocking image encoding.
canvas.encode()returns a promise. A comment in the README's usage code says the encoding runs "in libuv thread pool, non-blocking". The same comment lists PNG, JPEG, AVIF and WebP. [1] - PathKit methods on Path2D. The
Path2Dinterface in the README adds a block of "PathKit methods". It includesopfor boolean operations,toSVGString,simplify,asWindingandstroke. The README showssimplify()removing overlapping contours from an SVG path. [1] - Evenodd to nonzero for font work.
asWinding()converts an evenodd fill rule to nonzero. The README says this is useful for OpenType font tools, because OpenType fonts only support nonzero. [1] - Lottie frames without a browser.
LottieAnimationloads a Lottie JSON file, seeks to a frame or time, and renders onto a canvas context. The README lists support for base64 embedded images, embedded vector fonts, external assets from aresourcePathdirectory, and the dotLottie format. [1] - Color emoji and COLRv1 text. The README's emoji example registers
AppleColorEmoji@2x.ttfunder the family name 'Apple Emoji' and aCOLRv1.ttffont under 'COLRv1'. It then draws emoji withstrokeTextand letters withfillText. [1]
Know before you start
- glibc 2.18 or newer. The README says Skia relies on the glibc 2.18 API. Your system needs glibc version 2.18 or later. [1]
- ARM CPU floor. For arm64 on Linux, the README requires a cortex-a57 or newer CPU. For armv7 it requires cortex-a7 or newer. On macOS, the README lists all Apple M chips as supported. [1]
- AWS Lambda needs a layer. The README says Lambda requires a Lambda layer, with an ARN taken from the Canvas-Lambda-Layer project it links to. It also says to exclude
@napi-rs/canvaswhen bundling your Lambda. [1] - PathOp descriptions do not match the names. In the README's PathKit section, the one-line descriptions appear shifted against the operation names. Union is described as subtraction and Difference as intersection. Check results yourself instead of relying on that list. [1]
- Benchmark row is not named after the package. The README's benchmark tables, run on an Apple M3 Max, compare rows labeled '@napi-rs/skia', 'skia-canvas' and 'node-canvas'. The README does not say that '@napi-rs/skia' is this package. Any reading of the numbers depends on that assumption, and they come from one machine. [1]
Project facts
| Latest version | skia-95ee33d7-fcf7328d, October 14, 2026 [3] |
|---|---|
| On GitHub since | August 2020 [2] |
| License | MIT [2] |
On AgentGid: All 3d and graphics PDF.js tsx Vitest
How @napi-rs/canvas is funded
GitHub Sponsors
| @Brooooooklyn | 19 current sponsors |
|---|
GitHub shows how many people and companies sponsor an account, not how much they pay. Sponsors of a person back all of their work, which here includes @node-rs/argon2, @napi-rs/keyring, NAPI-RS.
Ways to fund @napi-rs/canvas
As the maintainers list them in FUNDING.yml on GitHub. Checked Oct 20, 2026.
Agent Skills for @napi-rs/canvas
| canvas-design from anthropics/skills | Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, …npx skills add anthropics/skills --skill canvas-design |
|---|---|
| canvas-design from ComposioHQ/awesome-claude-skills | Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, …npx skills add ComposioHQ/awesome-claude-skills --skill canvas-design |
| canvas-design from composio-community/awesome-codex-skills | Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, …npx skills add composio-community/awesome-codex-skills --skill canvas-design |
| canvas from AgriciDaniel/claude-obsidian | Create, inspect, and update Obsidian JSON Canvas boards with text, file, link, group, and edge nodes. Use for canvas status, canvas lists, visual maps, zones, …npx skills add AgriciDaniel/claude-obsidian --skill canvas |
| canvas-design from davepoon/buildwithclaude | Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, …npx skills add davepoon/buildwithclaude --skill canvas-design |
| canvas-design from snyk/agent-scan | Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, …npx skills add snyk/agent-scan --skill canvas-design |
Skills teach your coding agent how to use @napi-rs/canvas well. Official means the pack comes from the same GitHub account as @napi-rs/canvas. Read a skill before installing it: it can include scripts. All Agent Skills
Install
| Package | npm install @napi-rs/canvas |
|---|---|
| Main stacks | TypeScript / JavaScript (14), Python (7), Next.js (6) |
| Example projects | Bitterbot-AI/bitterbot-desktop, ArgentAIOS/argentos-core, raucvr/Group-Goki, hashSTACS-Global/EnClaws, alkem-io/server |
Alternatives to @napi-rs/canvas
Tools that do the same job, so a project picks one or the other. Add-ons and libraries used alongside @napi-rs/canvas are not listed here; they are in "Often used with".
| Tool | Gid Score | Used in agent projects | Downloads / wk | GitHub stars | License |
|---|---|---|---|---|---|
| Three.js npm JavaScript 3D library for creating interactive 3D graphics in browsers. |
89 | 145 (3.0%) | 14.1M | 117K | MIT |
| Resvg-JS npm High-performance SVG renderer powered by Rust for server-side SVG rasterization. |
50 | 19 (0.4%) | 2.6M | 2,002 | MPL-2.0 |
| node-canvas npm Canvas graphics API for Node.js backed by Cairo rendering. |
59 | 15 (0.3%) | 4.6M | 10.7K | MIT |
More in 3D and graphics: Leaflet React Three Fiber React Leaflet Mapbox GL MapLibre GL OGL Simplex Noise react-map-gl
Sources
Description written by AgentGid from these official pages, checked Oct 17, 2026. Usage numbers come from our own scan. Claims by the maintainers are quoted, not tested by us.