drawText (Test)
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
black1
dark blue2
dark green3
dark cyan4
dark red5
dark magenta6
dark yellow7
light gray8
dark grey9
light bluea
light greenb
light cyanc
light redd
light magentae
light yellowf
white
-
Styles:
l
boldn
underlineo
italicm
strikethroughr
reset formatting
-
Others:
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 {
getCanvaConfig,
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(async (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,
};
const cfg = await getCanvaConfig('Your Code');
drawText(canvas, cfg, shadow);
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
and y
: the coordinates where the text will be drawn.fontName
: the font name used to draw the text.fontSize
: the font size.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
This is a test version. If you wish to try it out, you will need to join my Discord server to generate your code. The generated code can then be used in 'canvas-text-colorizer'. The settings - text, x, y, fontName, and fontSize - are all adjusted via my bot, which is available on the server.