A utility for Canvas with chainable methods and consistent interface for all environments
This module requires one of the following packages to be installed for Node.js:
Note: If you are building a website, no extra dependencies are required.
How to use it:
Node.js:
const { Canvas } = require('canvas-constructor/napi-rs'); // or 'canvas-constructor/skia' if you are using `skia-canvas` // or 'canvas-constructor/cairo' if you are using `canvas` new Canvas(300, 300) .setColor('#AEFD54') .printRectangle(5, 5, 290, 290) .setColor('#FFAE23') .setTextFont('28px Impact') .printText('Hello World!', 130, 150) .png();
Browser:
<canvas id="canvas" width="300" height="400"></canvas> <script type="text/javascript" src="https://unpkg.com/canvas-constructor"></script> <script type="text/javascript"> const canvasElement = document.getElementById('canvas'); new CanvasConstructor.Canvas(canvasElement) .setColor('#AEFD54') .printRectangle(5, 5, 290, 290) .setColor('#FFAE23') .setTextFont('28px Impact') .printText('Hello World!', 130, 150); </script>
Alternatively, you can import canvas-constructor/browser if you are using a bundler such as Vite, Webpack, or Rollup:
import { Canvas } from 'canvas-constructor/browser';
Now, let's suppose we want to add images, we can use the loadImage function, which works in all supported environments:
const { Canvas, loadImage } = require('canvas-constructor/napi-rs'); async function createCanvas() { const image = await loadImage('./images/kitten.png'); return new Canvas(300, 400) .printImage(image, 0, 0, 300, 400) .setColor('#FFAE23') .setTextFont('28px Impact') .setTextAlign('center') .printText('Kitten!', 150, 370) .pngAsync(); }
And now, you have created an image with a kitten in the background and some centered text at the bottom of it.
If you experience issues with @napi-rs/canvas, skia-canvas, or canvas, please refer to their respective package repositories, this
package is just a convenient wrapper that makes it easier to use the canvas in both Node.js and the browser. And does not modify the
behavior of the underlying canvas implementation.