canvas-constructor

An ES6 function for node-canvas with built-in utilities and chained methods.

Installation

Please check node-canvas readme for the installation. You must have Canvas installed and working before using this package.

---

How to use it:

Node.js:

const { Canvas } = require('canvas-constructor');

new Canvas(300, 300)
    .setColor('#AEFD54')
    .addRect(5, 5, 290, 290)
    .setColor('#FFAE23')
    .setTextFont('28px Impact')
    .addText('Hello World!', 130, 150)
    .toBuffer();

Browser:

<script type="text/javascript" src="canvasconstructor.master.min.js"></script>
<script type="text/javascript">
const canvasElement = document.getElementById('canvas');
CanvasConstructor.Canvas.from(canvasElement)
    .setColor('#AEFD54')
    .addRect(5, 5, 290, 290)
    .setColor('#FFAE23')
    .setTextFont('28px Impact')
    .addText('Hello World!', 130, 150);
</script>

• 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. I'd recommend fs-nextra, by BDISTIN, it requires Node.js 8.5.0 to work (it promisifies the async fs methods with Util.promisify()), it's a dependency-free and lightweight package that provides support for atomic operations.

const { Canvas } = require('canvas-constructor');
const fsn = require('fs-nextra');

async function createCanvas() {
    const image = await fsn.readFile('./images/kitten.png');

    return new Canvas(300, 400)
        .addImage(image, 0, 0, 300, 400)
        .setColor('#FFAE23')
        .setTextFont('28px Impact')
        .setTextAlign('center')
        .addText('Kitten!', 150, 370)
        .toBufferAsync();
}

• 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 centered text in the bottom of it.

If you experience issues with Canvas or want to install it, please refer to the canvas repository, if you feel you found an issue in this package, feel free to file an issue here, or make a Pull Request if you have the fix.