khrome / environment-safe-canvas

import a canvas module using the same interface in node + the browser

environment-safe-canvas

There's a great node canvas and a great browser canvas, but there's not a great way to write 1 script that works in the browser and in node. This sorts out the rough edges.

Usage

import { Canvas } from 'environment-safe-canvas/environment-safe-canvas.mjs';
//or
const { Canvas } = require('environment-safe-canvas/environment-safe-canvas.js');
//...
const myCanvas = new Canvas({ height: 200, width: 200 });
// use canvas

when you run in the browser(without a build), you'll need your head to have:

<script type="importmap">
    {
        "imports": {
            "chai": "/node_modules/chai/chai.js",
            "environment-safe-chai": "/node_modules/environment-safe-chai/environment-safe-chai.mjs",
            "module": "/node_modules/browser-or-node/src/index.js",
            "file-saver": "/file-saver.js",
            "browser-or-node": "/node_modules/browser-or-node/src/index.js"
        }
    }
</script>

Nonstandard Methods

Canvas.save(location, canvas);

Canvas.load(location[, canvas])

Canvas.delete(location)

Testing

npm run test

To run the same in a browser

npm run browser-test

To run the same in a container

npm run container-test