# canvas-sketch-util: small modules for generative art

> canvas-sketch-util is an MIT licensed set of independent modules for generative art in Canvas, WebGL and plain JavaScript, covering maths and interpolation, seeded randomness, colour conversion, geometry, SVG paths, pen plotters and GLSL shaders. The judgement is that the design is deliberately unbundled, so you take the one file you need, and that the parts of the ecosystem it grew with, the path and colour libraries, are more interesting than the utilities themselves.

**mattdesl/canvas-sketch-util** — Utilities for sketching in Canvas, WebGL and generative art

- Repository: https://github.com/mattdesl/canvas-sketch-util
- Stars: 749 · Forks: 65
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/mattdesl-canvas-sketch-util

## A utility belt that you load one module at a time

canvas-sketch-util is a set of utilities for sketching in Canvas, WebGL and JavaScript, and the repository description is precise about the domain, utilities for generative art in Canvas, WebGL and JavaScript.

It was built to sit alongside the canvas-sketch toolset, but the readme is careful to say it is generic enough to work for various Node.js and browser use cases, which is a broader claim than a companion library usually makes.

The design decision that defines the package is that you take only what you need. The readme says you can require each module individually and grab only the necessary functions, and the example shows it:

```js
const math = require('canvas-sketch-util/math');

console.log(math.clamp(1.25, 0, 1));
// 1
```

Or, with destructuring, a single function or two:

```js
const { fract, lerp } = require('canvas-sketch-util/math');

console.log(fract(51.23));
// 0.23

console.log(lerp(0, 50, 0.5));
// 25
```

There is no bundler step, no side effects and no framework to initialise. The package is published as CommonJS with index.js as the main entry, and the modules sit at the root of the package as separate files, math.js, random.js, color.js, geometry.js, penplot.js and shader.js, with a lib directory for the shared internals.

## Random is the module generative work depends on

The random module is the one that makes generative art reproducible, and its design is borrowed from a game engine rather than from the JavaScript standard library.

The readme says the random utility has been inspired by Unity3D as well as other engines, and the API follows that lineage. There is a plain value function:

```js
const random = require('canvas-sketch-util/random');

console.log(random.value());
// some random number between 0 (inclusive) and 1 (exclusive)
```

And there is a seeded generator, which is the part that matters for a sketch:

```js
const seeded = random.createRandom(25);

console.log(seeded.range(25, 50));
// some deterministic random number

console.log(seeded.shuffle([ 'a', 'b', 'c' ]));
// deterministically shuffles a copy of the array
```

Two details are worth noting. The seeded generator returns a value in a range and it shuffles a copy of the array rather than the array itself, so the caller's data is not modified. And the seed is an ordinary number, so a sketch can take its seed from a URL parameter or a timestamp and produce the same drawing again.

The underlying implementation is the seed-random package at version 2.2.0, which is the well known deterministic generator that this style of API is built on.

## Colour and geometry lean on a small path ecosystem

The colour and geometry modules are where the dependency list of the package becomes interesting, because the utilities are thin wrappers around a set of focused libraries rather than implementations of their own.

For colour, the package depends on parse-color for reading a colour from a string, on float-rgb2hsl and float-hsl2rgb for the conversion between the two models in floating point form, and on color-luminance for relative luminance, which is what you need when you are picking a readable foreground colour. Almost-equal, array-almost-equal and defined round out the numeric helpers, and the colour utilities are documented on their own page in the docs directory.

For geometry, the dependencies are the SVG path stack. There is parse-svg-path and abs-svg-path for reading and normalising path data, normalize-svg-path for the output form, d3-path for building paths, svg-path-contours for turning a path into outlines, lineclip for clipping, primitive-quad for quads, and convert-length for unit conversion. The geometry module is the utilities for geometry and shapes, and it is the piece that ties the package to the vector drawing world rather than to the canvas world.

That is the real design of the package, in one sentence. The utilities are small, and the judgement about the underlying libraries is left visible in the dependency list rather than hidden behind an abstraction.

## Penplot and shader reach outside the screen

Two modules serve use cases that are not about drawing on a canvas at all, and they are the most distinctive parts of the collection.

The penplot module holds utilities for working with pen plotters, and the readme names AxiDraw as the example. A pen plotter is a machine that holds a physical pen and draws, so the software has to think about line quality, about whether a path is closed, about how fast the machine can move, and about the fact that the output is a physical artefact that cannot be undone. That is a different set of concerns from screen drawing, and having a module for it tells you something about who uses this package.

The shader module is a full-screen GLSL shader utility, which is the WebGL half of the collection. The regl library at version 1.3.7 provides the small WebGL wrapper it is built on, and the utility handles the full-screen quad and the uniform plumbing that a fragment shader needs.

The other dependencies fit that picture. simplex-noise at 2.4.0 is the classic noise function that generative sketches use for terrain, clouds and drift, and clone is the small utility for deep copying values.

Together, these modules mean the package is not only about the 2D canvas. It covers the pipeline from random numbers to noise to geometry to path output, with a hardware destination at the end.

## Each module has its own documentation page, and one module is missing

The documentation is organised per module, which is a better fit for a package that is used in pieces.

The readme links to a separate page for each module, math, random, color, geometry, penplot and shader, and the full API documentation lives in the docs directory with a README there. There are also examples in the test directory, in a file called examples.js, which is where you go to see the modules used together rather than in isolation.

One entry is a plan rather than a feature, and the readme is straightforward about it. The tween module, for tweening, easing and animation utilities, is listed as planned but not yet implemented. And more to come, the readme says.

That gap deserves weighing if you are choosing this package for animation work, because a generative piece that moves needs interpolation over time, and at present you would write that yourself or reach for another library. The maths module has lerp and the other interpolation helpers, which cover a lot of ground, but tweening is the layer above them, the part that decides how a value moves from one state to the next over a duration.

The repository layout is small and flat, with the module files at the root, a lib directory, a docs directory and a test directory, and the npmignore file alongside the gitignore means the published package is trimmed of what is not needed at runtime.

## Plain CommonJS, tape for tests, and a lint setup from another era

The package manifest is small and says a lot about the project's age and its priorities.

The package is canvas-sketch-util at version 1.10.0, the main entry is index.js, the licence is MIT and the author is Matt DesLauriers. There is no build script at all, because there is nothing to build, and the exports are the plain files.

The test setup is tape, a minimal assertion library, and the test script runs the lint first and then the tests:

```
"test": "npm run lint && tape test/test-*.js"
```

The lint setup is the part that dates the project. There are two lint passes, one for ES6 code using semistandard, and one for ES5 using ESLint with the parser option set to ecmaVersion 5 and no shared configuration:

```
"lint:es5": "eslint --parser-options=ecmaVersion:5 --no-eslintrc *.js lib/*.js"
```

Running a separate lint pass for ES5 syntax over the root and lib files means the library deliberately supports being parsed as ES5, which is a compatibility choice for a package that has been in use for a long time. The ESLint version is 5.3.0, which is from 2018, and the eslint-plugin-node is at 7.0.1.

The project has no GitHub releases, so the version in the manifest is the version you install, and the last push to the repository was on 2026-06-02, with the repository not archived. The keywords list genart, generative, canvas, sketch and geometry, which is a reasonable description of the audience.

## Conclusion

canvas-sketch-util fits a generative artist who wants a seeded random source, a colour conversion and a path helper without adopting a framework, because each module is requireable on its own and the seeded generator gives reproducible output for a given seed. It is the wrong choice if you want a maintained animation system, since the tween module for tweening, easing and animation is listed as planned but not implemented, and it is the wrong choice if you need a modern build pipeline, because the package is plain CommonJS with an ESLint 5 setup that predates the flat config era. Before you adopt it, read the module documentation rather than the readme, because each module has its own page under docs, and pin the version you install, since the last push was on 2026-06-02 and the project publishes no GitHub releases to compare against.

## FAQ

### What is canvas-sketch-util?

It is a set of MIT licensed utilities for generative art in Canvas, WebGL and JavaScript, built to sit alongside the canvas-sketch toolset but generic enough for Node.js and browser use. Each module can be required on its own, for example canvas-sketch-util/math, so you only take the code you need.

### How do I get deterministic random numbers in canvas-sketch-util?

Use random.createRandom with a seed to build a seeded generator, then call methods such as seeded.range for a number in a range or seeded.shuffle, which deterministically shuffles a copy of the array rather than the array itself.

### Does canvas-sketch-util have tweening and animation support?

Not yet. The readme lists tween, for tweening, easing and animation utilities, as planned but not yet implemented, alongside the modules that do exist: math, random, color, geometry, penplot and shader.

### How do I install canvas-sketch-util and what does it depend on?

Run npm install canvas-sketch-util --save. The runtime dependencies are small focused libraries including seed-random for the random module, parse-color and the float colour conversions, d3-path and the SVG path tools for geometry, regl for the shader module and simplex-noise for noise.

## Sources

- [Issues](https://github.com/mattdesl/canvas-sketch-util/issues)
- [License: MIT](https://github.com/mattdesl/canvas-sketch-util/blob/master/LICENSE)
- [mattdesl/canvas-sketch-util on GitHub](https://github.com/mattdesl/canvas-sketch-util)
- [README](https://github.com/mattdesl/canvas-sketch-util/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/mattdesl-canvas-sketch-util