canvas-sketch

:closed_book: canvas-sketch → Documentation → Troubleshooting

Troubleshooting

Supported Engines & Browsers

The canvas-sketch ecosystem is generally designed with ES6 support in mind, intended to be run on modern browsers with support for hardware-accelerated Canvas/WebGL.

The JavaScript library/module is transpiled to ES5 syntax, but relies on some ES6 APIs such as Promise, fetch, etc. Polyfills may allow the library to work in legacy browsers, but it has not been tested.

It should work with a variety of bundlers (Webpack, Rollup, Parcel, Browserify, etc). If you run into integration issues, please open a new issue.

Recommended minimum versions:

Installing Node.js, npm and a terminal

If you download Node.js from its website, it will also include a recent version of npm. After installation, reboot your computer and the software should be available in your terminal or command-line application:

Using canvas-sketch with Webpack and Other Bundlers

The canvas-sketch module exports a regular ES5 library, so you should be able to use it in Webpack, Rollup, and other bundlers.

import canvasSketch from 'canvas-sketch';

However, without the canvas-sketch-cli tool running, file exporting will use regular browser APIs which can lead to a less optimal development experience.

Using canvas-sketch without Node.js and npm

You can use this without a package manager by using the unpkg.com service and pointing to the UMD build. For example:

<html>
  <body>
    <!-- Attaches canvasSketch to window global -->
    <script src="https://unpkg.com/canvas-sketch@latest/dist/canvas-sketch.umd.js"></script>
    <!-- Now you can use the library like normal -->
    <script>
      canvasSketch(() => {
        // ...
      });
    </script>
  </body>
</html>

You can also download the latest build here and include it yourself, which is easier for offline use.

Fixing EACCESS Error on npm install -g

If you get an EACCESS error when installing canvas-sketch-cli globally, you may want to see these guides:

Installing ffmpeg For Animation Sequences

To use canvas-sketch-mp4 and canvas-sketch-gif, you’ll need to install ffmpeg for your platform. You can either install native ffmpeg (such as through brew install ffmpeg on macOS), or you can install this module which will be resolved locally or globally:

npm install @ffmpeg-installer/ffmpeg --global

Once installed, ffmpeg should be added to your PATH environment variable for. This may require restarting terminal or rebooting your computer.

##

← Back to Documentation

This site is open source. Improve this page.