Simplified and object-based drawing on HTML canvas!
npm install @armniko/canvas
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)
);
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 |