@armniko/canvas

Canvas

Simplified and object-based drawing on HTML canvas!

Installation

npm install @armniko/canvas

Usage

Create 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

v1.2.0	Precompile UMD and ESM
v1.1.1	Bugfixes: - missing ImageSource type - no shadow for 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