canvas-text-color v6.2.2

drawText

canvas-text-color is a Node.js package that simplifies the use of Canvas, allowing you to add custom colors, styles, and formatting to text.

Overview

To use the "canvas-text-color" package, you need to have Node.js and the npm package manager installed on your machine.

Text Formatting

To add colors and styles to the text, insert a formatting code after the & character:

• Colors:

  • 0 black
  • 1 dark blue
  • 2 dark green
  • 3 dark cyan
  • 4 dark red
  • 5 dark magenta
  • 6 dark yellow
  • 7 light gray
  • 8 dark grey
  • 9 light blue
  • a light green
  • b light cyan
  • c light red
  • d light magenta
  • e light yellow
  • f white

• Styles:

  • l bold
  • n underline
  • o italic
  • m strikethrough
  • r reset formatting

• Other Features:

  • \n line break

Installation Made Simple

To install the package, open your terminal and type the following command:

npm install canvas-text-color

Integration Example

To use the canvas-text-color function from the "canvas-text-color" package in your Javascript code, follow the example below:

const {
    createCanvas,
    loadImage
} = require('canvas');

const {
    getCanvaConfig,
    drawText
} = require('canvas-text-color');

const canvas = createCanvas(500, 300);

loadImage('https://avatars.mds.yandex.net/i?id=78ecb61c196a8cdc540c59ae74ec56c0e47e8242-8498042-images-thumbs&n=13').then(async (image) => {
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // Location of your code -> https://imgur.com/bptnDuG

    const config = await getCanvaConfig('Your Code');
    drawText(canvas, config);

    const fs = require('fs');
    const out = fs.createWriteStream('output.png');
    const stream = canvas.createPNGStream();
    stream.pipe(out);
    out.on('finish', async () => console.log('ok'));
});

The drawText function takes the following parameters:

1. canvas: the canvas on which the text will be drawn.
2. text: the text to be drawn, with the possibility of defining colors, styles, and formatting.
3. x and y: the coordinates where the text will be drawn.
4. fontName: the font name used to draw the text.
5. fontSize: the font size.

Output Example

The image generated in the example above would be something like:

Notices

For additional details and registration, please visit https://canvas-text-color.squareweb.app/register