cherry-box v1.4.0

About

cherry-box is a Node.js package filled with utilities, which are useful for working with node-canvas.

Example usage

const cb = require("cherry-box")
const Canvas = require("canvas")
const fs = require("fs");

let canvas = Canvas.createCanvas(1000, 200);
let ctx = canvas.getContext('2d');

let text = [
    {
        text: "I like cookies!",
        color: "#ffffff",
        font: "monospace",
        modifier: "bold",
    }
]
cb.textBox(ctx, 0, 0, 1000, 200, text, 200, [1, 1]);

// Save canvas to file
let out = fs.createWriteStream("./out.png");
let stream = canvas.createPNGStream();
stream.pipe(out); 

Using modules:

import { textBox } from "cherry-box";
import { createCanvas } from "canvas";
import fs from "fs";

let canvas = Canvas.createCanvas(1000, 200);
let ctx = canvas.getContext('2d');

let text = [
    {
        text: "I like cookies!",
        color: "#ffffff",
        font: "monospace",
        modifier: "bold",
    }
]
textBox(ctx, 0, 0, 1000, 200, text, 200, [1, 1]);

// Save canvas to file
let out = fs.createWriteStream("./out.png");
let stream = canvas.createPNGStream();
stream.pipe(out); 

Using Typescript

When using textObject you also need to import TextObject

import { textObject } from "cherry-box";

...

let text: TextObject = [
    {
        text: "I like cookies!",
        color: "#ffffff",
        font: "monospace",
        modifier: "bold",
    }
]

...

Documentation

Popular functions

• textBox - Align the text to specified width and height, adjust the size of the font so it fits.
• textSchema - An easy way to specify text color, font, shadow and more into a JSON object.

TextObject

TextObject is made of multiple objects. These objects accepts the following values:

Shadow schema

Shadow is a JSON object with the following values:

x and y offsets are relative to the text size. For example use x: 10, y: 10

Example text schema:

[
    {
        text: "I like cookies!",
        color: "#ff8800",
        shadow: {
            offset: [10, 10], blur: 5, color: "red"
        },
        font: "Arial",
        modifier: "bold"
    }
]

textBox

textBox is an easy way to align your text, decrease font size to fit in an area and more.

textBox Schema

Align values

1. Horizontal: left 0, center 1, right 2
2. Vertical: top 0, middle 1, bottom 2

Example: [1,1]

Example use of textBox in your code:

textBox(ctx, 0, 0, canvas.width, canvas.height-20, upperText, 80, [2,1]);

wrapText

wrapText is a function similar to textBox, but it doesn't just align the text. It also wraps the text to fit in the specified width.

wrapText Schema

Align values

• left 0
• center 1
• right 2
• justify 3

Example use of wrapText in your code:

wrapText(ctx, 0, 0, canvas.width, text, 20, 3);