explaingit

automattic/node-canvas

10,673JavaScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A Node.js library that brings the browser's canvas drawing API to the server, letting you generate images, PDFs, and SVGs from code using the same commands you'd write in a browser.

Mindmap

mindmap
  root((node-canvas))
    What it does
      Server-side drawing
      Image generation
      PDF and SVG export
    Tech Stack
      JavaScript Node.js
      Cairo graphics
      Pango text
    Use Cases
      Dynamic thumbnails
      Chart rendering
      PDF creation
    Setup
      System libs needed
      Pre-built binaries
      Node 18 or later
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Generate dynamic images or thumbnails on a server without spinning up a browser

USE CASE 2

Render charts, diagrams, or annotated images as PNG files in a Node.js backend

USE CASE 3

Produce PDFs programmatically using the same canvas drawing code you'd write for a browser

USE CASE 4

Add text with full Unicode and right-to-left script support to server-generated images

Tech stack

JavaScriptNode.jsCairoC++

Getting it running

Difficulty · moderate Time to first run · 30min

Requires installing system libraries (libcairo, libpango) via your OS package manager before running npm install.

In plain English

Node-canvas brings the browser's drawing API to Node.js, letting you create and manipulate images on a server without a browser involved. In a browser, you can draw shapes, text, and images onto a canvas element and then export the result as a PNG or JPEG. Node-canvas replicates that same programming interface so that scripts running on a server can do all the same things: draw rectangles, render text with custom fonts, load and composite photos, and save the finished image to a file or send it as a response. Under the hood, it relies on Cairo, a well-established graphics library used in Linux desktop environments and many other places. This is why the installation involves a few system-level dependencies beyond the usual npm install. On a Mac or Linux machine you install libraries like libpango and libcairo through your system package manager first, then install the npm package. Pre-built binaries are available for common platforms, so most users do not need to compile anything themselves. The API closely follows the standard Web Canvas API that browsers expose. If you have written canvas drawing code for a website, most of it will work in node-canvas with little or no change. The project documents the gaps where behavior differs from the browser standard. There are also a handful of extras not found in browsers, such as the ability to export directly to a PDF or SVG file, stream output progressively, or load fonts from local files using registerFont. Common use cases include generating dynamic images on a server, creating thumbnail previews, rendering charts or diagrams as PNG files, and producing PDFs programmatically. Because Cairo handles text through the Pango library, node-canvas supports full Unicode text, right-to-left scripts, and complex font features, which plain image-manipulation libraries sometimes lack. The package is maintained by Automattic, the company behind WordPress.com. It requires Node.js 18.12.0 or later.

Copy-paste prompts

Prompt 1
Using node-canvas, help me write a Node.js script that generates a 1200x630 social media preview card with a title, description, and logo image.
Prompt 2
I want to render a bar chart as a PNG file on my Node.js server using node-canvas, show me how to draw axes, bars, and labels.
Prompt 3
Help me install node-canvas on Ubuntu and set up the Cairo and Pango system dependencies so npm install completes without errors.
Prompt 4
Show me how to use registerFont in node-canvas to load a custom local font file and render styled text with it.
Open on GitHub → Explain another repo

← automattic on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.