canvas-text-colorizer

drawText (Beta)

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

Requirements

To use the "canvas-text-colorizer" 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

• Others:

  • \n line break

Installation

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

npm install canvas-text-colorizer

Usage

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

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

const {
   drawText
} = require('canvas-text-colorizer');

const canvas = createCanvas(500, 300);

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

   const shadow = {
      color: '#000000',
      offsetX: 2,
      offsetY: 2,
      blur: 4,
   };

   drawText(canvas, '&aText with color\n&r&lBold text\n&r&nUnderlined text\n&r&oItalic text\n&r&mStrikethrough text', 50, 50, 'Arial', 30, shadow);

   const fs = require('fs');
   const out = fs.createWriteStream('output.png');
   const stream = canvas.createPNGStream();
   stream.pipe(out);
   out.on('finish', () => 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.
6. shadow: (optional) an object containing the color, offsetX, offsetY, and blur of the text shadow. Set to null if not needed.

Output Example

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

Notices

There may be inaccuracies in the explanation of this README, as I used translation software to write it. Furthermore, I'd like to emphasize that this package was created with the goal of simplifying the use of Canvas, and as such, it may present flaws that have not been fully tested. If you find any bugs, please feel free to contact me on Discord. I also welcome suggestions or constructive criticism to help improve the package.