canvas-sketch: A JavaScript Framework for Generative Art in the Browser

What canvas-sketch Solves for Generative Artists

canvas-sketch addresses a specific workflow problem for generative artists working in JavaScript: how to write code once and export artwork at a resolution appropriate for printing, without managing the gap between browser pixel density and physical print dimensions manually.

The framework wraps a settings object that accepts physical dimensions and DPI values. When the developer passes dimensions: 'a4' and pixelsPerInch: 300 in the settings, the canvas is sized so that a Cmd+S or Ctrl+S keypress in the browser exports a PNG that matches 21 x 29.7 cm at 300 DPI. The README states that the saved PNG file matches those dimensions and can be printed with archival ink on quality paper.

The framework also handles animation, file export, hot reloading of sketch code, and integration with third-party rendering libraries. The result is a development environment where the artist focuses on the generative logic rather than the browser and file system boilerplate.

The CLI Tool and How Projects Are Started

The primary interface to canvas-sketch is the CLI tool, which is distributed as a separate package: canvas-sketch-cli. The README recommends using npx for one-off invocations:

mkdir my-sketches
cd my-sketches
npx canvas-sketch-cli sketch.js --new --open

This creates a new sketch.js file from a default template and opens a browser tab. The live development server watches for file changes and refreshes the browser.

Additional CLI commands cover other workflows:

npx canvas-sketch-cli src/foobar.js --output=./tmp/
npx canvas-sketch-cli --new --template=three --open
npx canvas-sketch-cli src/foobar.js --build
npx canvas-sketch-cli src/foobar.js --hot

The --output flag redirects the PNG export folder from ~/Downloads to a specified path. The --template=three flag scaffolds a sketch using a Three.js template instead of the plain canvas default. The --build flag bundles the sketch into a shareable HTML and JavaScript website. The --hot flag enables hot reloading, where changes to the sketch file update the browser without a full page reload.

The README note clarifies the difference between npx canvas-sketch-cli and npm install canvas-sketch: the npx command is for running without a global install, while the README's Installation Guide (at docs/installation.md) covers setting up a global command.

Anatomy of a canvas-sketch Sketch

A sketch is a JavaScript module that calls canvasSketch with a settings object and a sketch function. The README provides an example of a print-ready A4 artwork:

const canvasSketch = require('canvas-sketch');

const settings = {
  dimensions: 'a4',
  pixelsPerInch: 300,
  units: 'in'
};

const sketch = () => {
  return ({ context, width, height }) => {
    const margin = 1 / 4;

    context.fillStyle = 'hsl(0, 0%, 98%)';
    context.fillRect(0, 0, width, height);

    const fill = context.createLinearGradient(0, 0, width, height);
    fill.addColorStop(0, 'cyan');
    fill.addColorStop(1, 'orange');

The settings object controls the canvas dimensions, DPI, and units. The sketch function returns a render function that receives context, width, and height on every frame. Width and height are in the units specified (inches in this example), so the artist can write margin = 1 / 4 to mean a quarter-inch margin regardless of the pixel density.

The returned render function is called once for static artwork and once per animation frame for animated sketches. For animation, the render function also receives time, frame, and playhead values.

The main canvas-sketch npm package is at version 0.7.8. The package.json describes it as a utility for quickly prototyping 2D and WebGL sketches. The isCanvasSketch flag in package.json identifies the package to tooling that needs to distinguish it from the separate canvas-sketch-cli package, which is installed independently and is the command that starts the development server.

Third-Party Library Support: Three.js, p5.js, and WebGL

The examples directory contains over twenty sketch files covering different rendering libraries. The --template=three flag scaffolds a Three.js sketch. The animated-three-basic-cube.js and animated-three-sphere-shader.js files in examples/ demonstrate animated Three.js usage. Similarly, animated-p5.js and animated-p5-instance.js show p5.js integration.

For WebGL shaders, examples such as animated-regl-fullscreen-shader.js use the regl library. The canvas-sketch framework is not coupled to any particular rendering library: the sketch function receives the canvas context, and the developer can pass that to any WebGL or canvas API.

The package.json devDependencies include regl, three at version ^0.154.0, p5 at ^0.7.2, two.js at ^0.7.0-beta.3, d3 at ^5.16.0, and canvas-sketch-util at ^1.8.0. These are development dependencies used in the examples, not runtime dependencies of the framework itself. The core library's runtime dependencies are minimal: convert-length, dateformat, deep-equal, and a few browser detection utilities.

Genuine Limitations and the Beta Status

The README describes canvas-sketch as a beta project, and the roadmap section lists items that are still outstanding. As of the README's last update, the missing features include: API and CLI documentation, beginner-friendly examples, a website or frontend, a HUD/GUI control panel, a gallery mode for viewing multiple sketches, an external module for utilities such as randomness and geometry, and unit tests.

The absence of API documentation is the most practical limitation. A developer who wants to understand the full settings object API or all available lifecycle hooks cannot consult an official reference; they must read the source code in the lib/ directory.

The lack of unit tests means there is no automated regression safety net. The last push was on 2026-06-02, and the project has no GitHub releases. The version in package.json is 0.7.8, consistent with a pre-1.0 project where breaking changes are possible across minor versions.

canvas-sketch does not produce SVG output. For plotter-based generative art that requires SVG paths, a different library would be more appropriate.

Alternatives and How canvas-sketch Differs

p5.js is the most widely used alternative for generative art in the browser. It provides a drawing API with its own built-in canvas management, animation loop, and a large community of beginner-friendly resources. The difference from canvas-sketch is focus: p5.js is a general creative coding environment, while canvas-sketch is specifically designed around the workflow of generating a static or animated artwork and exporting it at print resolution.

Canvas-sketch integrates with p5.js as a rendering library rather than replacing it: the --template=three example in the README shows this composability. An artist who wants p5.js's drawing convenience can still use canvas-sketch for the export and dimension management.

For SVG-based generative art, the Paper.js or Plot (by Observable) libraries address use cases that canvas-sketch does not cover. The key difference is output format: canvas-sketch produces raster PNG files, which suits fine art printing but not plotter art or scalable vector graphics.

Editorial conclusion

canvas-sketch is the right tool for JavaScript developers who want to produce generative artworks that target specific print dimensions and export at high DPI, using familiar browser APIs and third-party libraries like Three.js or p5.js. The beta label is not decorative: the README lists API and CLI documentation, a website, a GUI, a gallery mode, and a utilities module as all still outstanding. Developers who need a stable API for a production environment should verify the current state of the roadmap before building anything that cannot tolerate breaking changes. The command to start is npx canvas-sketch-cli sketch.js --new --open.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. mattdesl/canvas-sketch on GitHub
4. README