---

Installation

This module requires one of the following packages to be installed for Node.js:

• @napi-rs/canvas
• skia-canvas
• canvas

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();
Copy

Browser:

<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>
Copy

Alternatively, you can import canvas-constructor/browser.

• That will create a canvas with size of 300 pixels width, 300 pixels height.
• Set the color to #AEFD54
• Draw a rectangle with the previous color, covering all the pixels from (5, 5) to (290 + 5, 290 + 5)
• Set the color to #FFAE23
• Set the font size to 28 pixels with font Impact.
• Write the text 'Hello World!' in the position (130, 150)
• Return a buffer.

Now, let's suppose we want to add images, we'll use Canvas.loadImage, which works in both Node.js and browser:

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();
}
Copy

• That will create a canvas with size of 300 pixels width, 400 pixels height.
• Draw an image, given a Buffer (the image from the images folder).
• Set the color to #FFAE23
• Set the font size to 28 pixels with font Impact.
• Set the text alignment to center.
• Write the text 'Kitten!' in the position (150, 370)
• Return a buffer.

And now, you have created an image with a kitten in the background and some centred text in 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 for the three.