@armniko/canvas

Canvas

Simplified and object-based drawing on HTML canvas!

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.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