Cli-canvas NPM

Cli-Canvas

A no-dependency package for rendering terminal graphics efficiently

What cli-canvas ISN'T

cli-canvas is not an implementation of the Canvas API, don't expect it to do the same things the same way

What it IS

cli-canvas is used to render graphics using buffers, so as to reduce reduce redraws, lowering the 'flicker' that terminal graphics often have.

Documentation

Setup

const cliCanves = require("cli-canvas");

let ctx = new cliCanvas.Context();
ctx.begin();
// All rendering goes between begin() and end()
ctx.end();

Rendering Primitives

Note, (0, 0) is top left, and (width, height) is bottom right.

`ctx.point(x, y, character)`

character can be any string, but only the first character will be drawn

`ctx.line(x, y, width, height[, character])`

character defaults to ctx.style.line

`ctx.rect(x, y, width, height[, character])`

character defaults to ctx.style.line

`ctx.filledRect(x, y, width, height[, fillCharacter, lineCharacter])`

fillCharacter defaults to ctx.style.fill
lineCharacter defaults to ctx.style.line

`ctx.text(x, y, string)`

Working With Style & Color

Render characters are controlled by the ctx.style object (Class cliCanvas.Style)

Examples

// Render in (243, 54, 190) on black, change line symbol to 'M'
ctx.style.line = "M";
ctx.style.foreground = cliCanvas.Color.rgb(243, 54, 190);
ctx.style.background = cliCanvas.Color.Black;

Default Style Values:

line = "X";
fill = "O";
empty = " ";

// Borders & Corers
top = "\u2550";
bottom = "\u2550";
left = "\u2551";
right = "\u2551";

topLeft = "\u2554";
topRight = "\u2557";
bottomLeft = "\u255A";
bottomRight = "\u255D";

// Colors
foreground = Color.DefaultFG;
Background = Color.DefaultBG;

Events

Event handlers can be set through ctx.on("event", callback)

Current Events

resize: calls callback on terminal resize

Public Variables

ctx.width Width of canvas
ctx.height Height of canvas
ctx.style Style properties
cliCanvas.Style.Color terminal color object, has some predefined colors
cliCanvas.Style.Color.rgb(0-255, 0-255, 0-255) returns a terminal color
cliCanvas.Style(params) Style object constructor, params is object with values