^{📕 canvas-sketch → Documentation}

---

About

canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser using the <canvas> tag. It is designed to help create artworks and images with code, randomness, algorithms, and emergent systems.

You can use canvas-sketch to export high-resolution PNG for Giclée prints, render image sequences for GIF and MP4 loops, generate SVG files for mechanical pen plotters (like AxiDraw), automatically git hash your artworks for long-term archiving, and much more.

These tools can be used on their own, or combined with your favourite graphics library like ThreeJS, P5.js, Pixi, Regl, D3, etc.

API Docs

• canvas-sketch — API Docs

• canvas-sketch-cli — CLI Docs

Guides

• Installing and Using canvas-sketch

• A "Hello, World" Sketch

• Animated Sketches

• Hot Reloading

• Developing with Physical Units (inches, centimeters)

  • Paper Size Presets

  • Bleeds & Safe Zones

• Exporting Artwork to PNG, GIF, SVG, MP4 and other files

  • Exporting Animations

  • Exporting Other File Types

  • Running canvas-sketch in Node.js for Very Large Prints

  • Automatic Git Hashing for Long-Term Archiving

• WebGL, GLSL, Three.js and More

  • GLSL Files

  • Using glslify for modular GLSL

  • Live Shader Coding

  • Using Three.js, P5.js, and Other Libraries

• Other Topics

  • Utilities for Randomness, Math, Geometry, Color, etc.

  • Developing Pen Plotter Artwork

  • Async Sketches: Loading Images & Other Assets

  • Building for Web, Installations & VJ

• Troubleshooting

Contributing

If you are interested in helping develop or maintain canvas-sketch ecosystem:

• Contribution Guideline