https://github.com/mystroken/canvas

:kiwi_fruit: Object oriented canvas 2D rendering in JavaScript.
https://github.com/mystroken/canvas

canvas canvas2d javascript-oop

Last synced: about 1 month ago
JSON representation

:kiwi_fruit: Object oriented canvas 2D rendering in JavaScript.

• Host: GitHub
• URL: https://github.com/mystroken/canvas
• Owner: mystroken
• License: mit
• Created: 2019-09-05T16:35:09.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-09T05:41:15.000Z (almost 5 years ago)
• Last Synced: 2024-11-09T00:56:41.080Z (2 months ago)
• Topics: canvas, canvas2d, javascript-oop
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Canvas

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/mystroken/canvas/issues)

> :kiwi_fruit: Object oriented canvas 2D rendering in JavaScript.




## Installation

```bash

npm install @mystroken/canvas

```




## Usage

Look at the sources files for more information.

###### Import

```javascript

import Canvas from '@mystroken/canvas';

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

```

###### Create a renderable.

```javascript

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.

```javascript

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();

```