@armniko/canvas

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 } from '@armniko/canvas';

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

Create canvas without existing HTMLCanvasElement:

import { Canvas } from '@armniko/canvas';

const canvas: Canvas = new Canvas();
canvas.setSize({ width: 200, height: 100 });

// append canvas element to dom
document.body.appendChild(canvas.nativeElement());

Draw elements on canvas:

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

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

Changelog

v2.1.0	Technical: - removed minification of build - added exports field for proper module resolution and types - marked package as side-effect free
v2.0.0	Features: - pass callable attributes to element set methods - method to get hash for each element - option to set multiple rotations for all elements with `setRotations()` method which replaces `setDegrees()` - option to set scale for all elements - option to set crop area for an image element - option to set radius scale for radial gradient - option to pass position, scale, opacity and rotations into draw method - removed interface suffix from interfaces Bugfixes: - incorrect linear gradient position when rotating Technical: - migrated from webpack to vite - update all dependencies
v1.2.0	Technical: - precompile UMD and ESM
v1.1.1	Bugfixes: - missing ImageSource type - no shadow for an image element with border radius
v1.1.0	Features: - added line element - added gradient colors for usage as fill and border color for all elements
v1.0.0	Initial version