/canvas-lib

Canvas library with a delightful API

Primary LanguageTypeScript

canvas-lib

Canvas library with a delightful API.

Feature

  • support all kinds of shapes, draw with no side-effect
  • group shapes support
  • mouse event system
  • transform, scale and translate canvas coordinate
  • drag & drop shape
  • support basic animation
  • physical effects

API

See here

example

const canvas = new Canvas(document.querySelector('canvas'));

const rect = new Rect({
  x: 10,
  y: 20,
  width: 100,
  height: 100,
  fillStyle: 'blue',
});

rect.on('click', (e, shape) => {
  console.log('rect being clicked');
});

canvas.add(rect);

Design

  • Canvas, shape container, add/remove/draw shape, event delegation and dispatch
  • Shape, All concrete shape extends Shape, style、position property and shapes'events stored here
  • Group, special Shape container, it stored shape added to it. and change it's property like style and position