To help you get started, we've collected the most common ways that canvas-constructor is being used within popular public projects.

AdityaTD / PenguBot / src / commands / Profiles / rank.js View on Github

.getAll(member.guild.id, { index: "guildID" })
            .orderBy(r.desc("xp"))
            .run();

        const rank = data.findIndex(i => i.id.split(".")[1] === member.user.id) + 1;

        const bgName = member.user.settings.profilebg;
        const bgImg = await fs.readFile(`../assets/profiles/backgrounds/${bgName}.png`);
        const template = await fs.readFile(`../assets/profiles/backgrounds/template.png`);
        const pbar = await fs.readFile(`../assets/profiles/backgrounds/progressbar.png`);
        const avatar = await get(member.user.displayAvatarURL({ format: "png", sze: 256 })).then(res => res.body).catch(e => {
            Error.captureStackTrace(e);
            return e;
        });

        const render = await new Canvas(1000, 300)
            // Initializing and Text
            .addImage(bgImg, 30, 0, 300, 300)
            .addImage(template, 10, 0, 1000, 300)
            .setTextFont("41.67px Roboto, NotoEmoji")
            .setColor("#212121")
            .addResponsiveText(member.user.username, 570, 86, 260)
            .setTextFont("25px Roboto")
            .setColor("#404040")
            .addText(`#${member.user.discriminator}`, 570, 110)
            .save()
            // Other Text
            .setColor("#212121")
            .setTextFont("33.33px Roboto")
            .addText(`Server Rank: #${rank.toLocaleString()}`, 568, 158)
            .addText(`Server Level: ${lvl.toLocaleString()}`, 568, 189)
            .save()

View more ways to use canvas-constructor

Installation

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

• 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/skia');
// 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)
	.toBuffer();

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.resolveImage, which works in both Node.js and browser:

const { Canvas, resolveImage } = require('canvas-constructor/skia');

async function createCanvas() {
	const image = await resolveImage('./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)
		.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 centred text in the bottom of it.

If you experience issues with skia-canvas or canvas, please refer to their respective package repositories, this package is just a convenient wrapper for the two.