Package Exports

@armniko/canvas
@armniko/canvas/dist/index.esm.js
@armniko/canvas/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@armniko/canvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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