Canvas

A lightweight, object-based abstraction over the HTML Canvas 2D API. Compose drawings declaratively with chainable element builders.

Why Canvas?

• 🧩 Object-based — describe what to draw, not how to draw it
• 🧮 Reactive-friendly — pass functions (or signals) into any setter; attributes update with your app state, no manual rewiring
• 🔍 Built-in change detection — every element exposes getHash(), making memoization and dirty-checking trivial
• 🌐 Framework-agnostic — drop into Vue, Angular, React, or vanilla TS
• 📦 Zero dependencies and fully typed

Installation

npm install @armniko/canvas

Usage

Create a canvas with existing HTMLCanvasElement:

import { Canvas, TextElement, PositionPoint } from '@armniko/canvas';

// assuming that there is <canvas id="canvas"></canvas> in dom
const canvas: Canvas = new Canvas(document.getElementById('canvas'));

canvas.draw(
    new TextElement()
        .setText('Hello world!')
        .setFillColor('#ff0000')
        .setFontSize(20)
        .setPosition({ x: 100, y: 50 }, PositionPoint.Center)
);

Changelog