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.
To use the "canvas-text-color" package, you need to have Node.js and the npm package manager installed on your machine.
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
-
To install the package, open your terminal and type the following command:
npm install canvas-text-color
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:
-
canvas
: the canvas on which the text will be drawn. -
text
: the text to be drawn, with the possibility of defining colors, styles, and formatting. -
x
andy
: the coordinates where the text will be drawn. -
fontName
: the font name used to draw the text. -
fontSize
: the font size.
The image generated in the example above would be something like:
For additional details and registration, please visit https://canvas-jbo9.onrender.com/register