Nine Pomeranian Monsters

    cherry-box

    1.3.0 • Public • Published

    About

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

    Example usage

    import { textBox } from "cherry-box";
    import Canvas from "canvas";
    
    let canvas = new Canvas.createCanvas(800, 600);
    let ctx = canvas.getContext("2d");
    
    let textSchema = [
        {
            text: "I like cookies!",
            color: "#ff8800",
            font: "Arial",
            modifier: "bold",
            shadow: {
                offset: [10, 10], blur: 5, color: "red"
            },
        }
    ]
    textBox(800, 600, textSchema, 200, [1, 1]);

    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.

    textSchema

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

    name description example type required
    text Text to be displayed Hello world string true
    color Color of the text #FFFFFF string true
    shadow Shadow of the text shadow false
    font Font of the text Arial string true
    modifier Modifier of the text bold string true

    Example text schema:

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

    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 for minecraft font.

    name description example type required
    color Color of the shadow #FFFFFF string true
    blur Blur of the shadow 5 number true
    offset X and Y offset of the shadow [10, 5] array true

    textBox

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

    textBox Schema

    name description example type required
    x X position of the textbox 0 number true
    y Y position of the textbox 0 number true
    width Width of the textbox 100 number true
    height Height of the textbox 100 number true
    text Text to be displayed textSchema true
    maxFont Max font size of the text 100 number true
    fontName Font of the text Arial string true
    align Align of the text array true

    textBox Errors

    Code Description
    601 Text is too big to be displayed

    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

    name description example type required
    ctx Canvas context object true
    x X coordinate of the text box 0 number true
    y Y coordinate of the text box 0 number true
    width Width of the text box 100 number true
    text Text to be displayed textSchema true
    fontSize Font size of the text 100 number true
    align Align of the text justify string true

    Align values

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

    Example use of wrapText in your code:

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

    Install

    npm i cherry-box

    DownloadsWeekly Downloads

    8

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    21.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • cheryx