Canny Canvas

A js canvas 2D renderer written in Typescript. Inspired by Three.js and Unity.

Demo here

Installation

npm install canny-canvas --save-dev

or

yarn add canny-canvas

Get Started

1. Create a Scene, which takes a container dom element as input. There can be multiple Scenes, each Scene maintains a canvas element in the DOM.

import { Scene, Rect } from 'canny-canvas';

const dom = document.getElementById('app');
const scene = new Scene(dom);
// set `scene.debug` to `true` to render additional object information such as geometrical center.
// scene.debug = true

2. Add Objects to the Scene

// add a static green rect at (200, 200)
scene.addObject(new Rect({
  x: 200,
  y: 200,
  color: '#00ff00'
}));

// add a red box at (0, 500) which moves to the right at a uniform velocity.
scene.addObject(new Rect({
  x: 0,
  y: 500,
  color: '#ff0000',
  // DON'T use arrow function for update, or you'll lose access to the object's own properties.
  update: function(deltaTime) {
    this.x += deltaTime * 0.1;
  }
}));

// objects can be stacked, an object's position is relative to its parent
const parentRect = new Rect({
  x: 100,
  y: 100,
  width: 50,
  height: 50
});
const childRect = new Rect({
  x: 50,
  y: 50,
  width: 50,
  height: 50
});
parentRect.addObject(childRect);
scene.addObject(parentRect);

3. Finally, start the render loop and you'll see all the objects are rendered on the canvas with animations defined in their update function.

scene.loop();