Drawille-like multicolor Pixel-Canvas for ink: InkCanvas

[mehl]

Hey together!

I want to share the package I wrote, maybe someone finds it useful.

consolecanvas-next

Some of you may know "drawille" oder "console-canvas" that use braille characters for drawing in the console. I adopted this and rewrote it completely to support multicolor graphics and added a web-canvas-compatible drawing layer.

The results are pretty promising:

And it's really simple to use in your ink application:

import React from 'react';
import { Box, render, Text } from 'ink';
import { InkCanvas } from 'consolecanvas-next';
const HelloWorld = () => {

    return <Box flexDirection="column" borderStyle="round" borderColor="cyan">
        <Text color="white">InkCanvas Hello World.</Text>
        <Box>
            <InkCanvas width={60} height={15} adjustToSize={true}>
                {(canvas) => {
                    const ctx = canvas.getContext("2d");
                    ctx.strokeStyle = "rgb(155,90,100)";
                    ctx.strokeRect(0, 0, canvas.width - 1, canvas.height - 1);
                    ctx.strokeRect(1, 1, canvas.width - 3, canvas.height - 3);
                    ctx.fillStyle = "rgb(10,155,250)";
                    ctx.beginPath();
                    ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 4, 0, Math.PI * 2);
                    ctx.fill();
                }}
            </InkCanvas>
        </Box>
    </Box>;
};

render(<HelloWorld />);

Here is the link to the repository

https://github.com/mehl/consolecanvas-next?tab=readme-ov-file#support-for-ink-reactive-console-components

I hope you enjoy it! Please feel free to test and use it, and share your experiences.