Canvas

🥝 Object oriented canvas 2D rendering in JavaScript.

Installation

npm install @mystroken/canvas

Usage

Look at the sources files for more information.

Import

import Canvas from '@mystroken/canvas';
import Renderable from '@mystroken/canvas/Renderable'; 

Create a renderable.

class Circle extends Renderable {

    render(ctx) {
        ctx.beginPath();
        ctx.arc(110, 110, 25, Math.PI * 2, false);
        ctx.closePath();

        ctx.stroke();
    }
}

Add renderables on the canvas.

const canvas = new Canvas(document.querySelector('#canvas'));
canvas.resize(window.innerWidth, window.innerHeight);

// Get some renderables.
const circle = new Circle();
const rect = new Rectangle();

// Adds renderables to canvas.
canvas.add(circle);
canvas.add(rect);

// Render the canvas.
canvas.render();