Canvas API (added with chaiathon)

Canvas API is a toolkit to draw anything inside HTML Canvas

As Base, it uses JavaScript default Canvas API, but provides the easy way to have draw canvas using simple shapes like Rectangle, Circle, Polygon etc.

Basic usage #

import {Canvas} from 'levcharity/resources/scripts/helpers/Canvas';
import {DOM} from 'levcharity/resources/scripts/helpers/DOM'; // not required to use Canvas


const canvasElement = DOM.create('canvas');
document.body.append(canvasElement);


const canvas = new Canvas(canvasElement);
canvas.inject(new Canvas.Rect({
    width: canvas.canvas.offsetWidth,
    height: canvas.canvas.offsetHeight,
    fill: '#fff',
    radius: 20
}))

canvas.draw(); // async method

Shapes #

Canvas.Circle

Canvas.Curve

Canvas.FreePoyigon

Canvas.ImageRect

Canvas.Line

Canvas.Polygon

Canvas.Rect

Canvas.Text

Canvas.Shape – the base class that provides functionality which used for all shapes, all shapes extending from this class