# canvas-sketch
> A utility for quickly prototyping 2D and WebGL sketches
Latest version **0.7.8** (published 2026-05-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install canvas-sketch
pnpm add canvas-sketch
yarn add canvas-sketch
bun add canvas-sketch
```
## Health
**Score 45/100 (D)** — status: active.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.7.8 |
| Published | 2026-05-26 |
| First published | 2018-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 877.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5283 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |
| Keywords | sketch, 2d, processing, js, p5js, 3d, webgl, gl, opengl, threejs, canvas, canvas2d, generative, art, generativeart |
## Links
- npm: https://www.npmjs.com/package/canvas-sketch
- Repository: https://github.com/mattdesl/canvas-sketch
- Issues: https://github.com/mattdesl/canvas-sketch/issues
- npm.io page: https://npm.io/package/canvas-sketch
## Dependencies (8)
- [is-dom](https://npm.io/package/is-dom.md) ^1.0.9
- [is-class](https://npm.io/package/is-class.md) 0.0.5
- [right-now](https://npm.io/package/right-now.md) ^1.0.0
- [dateformat](https://npm.io/package/dateformat.md) ^3.0.3
- [deep-equal](https://npm.io/package/deep-equal.md) ^1.0.1
- [is-promise](https://npm.io/package/is-promise.md) ^2.1.0
- [convert-length](https://npm.io/package/convert-length.md) ^1.0.1
- [get-canvas-context](https://npm.io/package/get-canvas-context.md) ^1.0.2
## Alternatives
- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads
## Recent versions
- 0.7.8 (latest) — 2026-05-26
- 0.7.7 — 2023-03-25
- 0.7.6 — 2022-08-30
- 0.7.5 — 2022-03-04
- 0.7.4 — 2020-09-08
- 0.7.3 — 2020-02-17
- 0.7.2 — 2020-02-17
- 0.7.1 — 2019-10-24
- 0.7.0 — 2019-09-29
- 0.6.1 — 2019-08-21
- 0.6.0 — 2019-08-16
- 0.5.0 — 2019-06-20
- 0.3.1 — 2019-05-02
- 0.3.0 — 2019-04-22
- 0.2.1 — 2019-04-06
- … 28 more at https://npm.io/package/canvas-sketch/versions
## README
### canvas-sketch
`canvas-sketch` is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.
- :closed_book: [Documentation](./docs/README.md)
- :wrench: [Examples](./examples/)
#
example of canvas-sketch running in Chrome
↓
### Quick Start with Node.js & npm
To jump directly into `canvas-sketch`, try the following terminal commands with `node@15.x` and `npm@7.x` or newer:
```sh
# Make a new folder to hold all your generative sketches
mkdir my-sketches
# Move into that folder
cd my-sketches
# Scaffold a new 'sketch.js' file and open the browser
npx canvas-sketch-cli sketch.js --new --open
```
> :bulb: Notice the `x` in `npx`, and the `-cli` in `canvas-sketch-cli`
Now, while in the browser, hit `Cmd + S` or `Ctrl + S` to export a high-resolution PNG of your artwork to your `~/Downloads` folder.
### More Commands
Some other commands to try:
```sh
# Start the tool on an existing file and change PNG export folder
npx canvas-sketch-cli src/foobar.js --output=./tmp/
# Start a new sketch from the Three.js template
npx canvas-sketch-cli --new --template=three --open
# Build your sketch to a sharable HTML + JS website
npx canvas-sketch-cli src/foobar.js --build
# Develop with "Hot Reloading" instead of full page reload
npx canvas-sketch-cli src/foobar.js --hot
```
For more features and details, see the [Documentation](./docs/README.md).
### Installation Guide
The examples above use `npx` which is a convenient way to install and run a local CLI tool, but you might want to setup `canvas-sketch` as a global command. You can see more details in the [Installation Guide](./docs/installation.md).
### Code Example
Once you have the CLI tool running, you can try this example of an A4 print artwork.
```js
const canvasSketch = require('canvas-sketch');
// Sketch parameters
const settings = {
dimensions: 'a4',
pixelsPerInch: 300,
units: 'in'
};
// Artwork function
const sketch = () => {
return ({ context, width, height }) => {
// Margin in inches
const margin = 1 / 4;
// Off-white background
context.fillStyle = 'hsl(0, 0%, 98%)';
context.fillRect(0, 0, width, height);
// Gradient foreground
const fill = context.createLinearGradient(0, 0, width, height);
fill.addColorStop(0, 'cyan');
fill.addColorStop(1, 'orange');
// Fill rectangle
context.fillStyle = fill;
context.fillRect(margin, margin, width - margin * 2, height - margin * 2);
};
};
// Start the sketch
canvasSketch(sketch, settings);
```
When exporting the image in browser with `Cmd + S` or `Ctrl + S` keystrokes, the saved PNG file matches 21 x 29.7 cm at 300 DPI, and can be printed with archival ink on quality paper.
Resulting image looks something like this:
###### Note: The above PNG file has been scaled/optimized for web.
### Roadmap
There are many features still outstanding, such as:
- API & CLI Docs
- Easy & beginner-friendly examples
- Website/frontend
- HUD/GUI controls
- "Gallery Mode" for viewing many local sketches
- External Module for utilities (randomness, geometry, etc)
- Unit tests
- More??
### License
MIT, see [LICENSE.md](http://github.com/mattdesl/canvas-sketch/blob/master/LICENSE.md) for details.
---
_Source: https://npm.io/package/canvas-sketch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._