https://github.com/gamestdio/dsplay

A simple display list for canvas 2D.
https://github.com/gamestdio/dsplay

canvas

Last synced: 9 days ago
JSON representation

A simple display list for canvas 2D.

• Host: GitHub
• URL: https://github.com/gamestdio/dsplay
• Owner: gamestdio
• License: mit
• Created: 2016-01-26T00:40:24.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-30T12:23:21.000Z (almost 8 years ago)
• Last Synced: 2024-09-24T13:48:54.321Z (about 2 months ago)
• Topics: canvas
• Language: JavaScript
• Size: 19.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DSPLAY

A simple display list for canvas 2D.

### HTML Setup

- Download:

- Include: ``

### Node/Browserify Setup

- Install: `npm install dsplay`

- Include: `var dsplay = require('dsplay');`

### Usage

```javascript

// Everything starts with a Renderer and a Sprite:

var renderer = new dsplay.Renderer(canvas);

var container = new dsplay.Sprite();

// Sprites are just transform entities, so you need to draw stuff by yourself:

var box = new dsplay.Sprite();

container.add(box);

box.draw = (ctx) => {

  ctx.fillStyle = '#FF0000';

  ctx.fillRect(0, 0, 64, 64);

}

// Render loop:

render();

function render() {

  renderer.render(container);

  requestAnimationFrame(render);

}

// Also, there are some useful sprite-based objects, like Img:

var img = new dsplay.Img();

container.add(img);

img.y = 80;

img.load('https://goo.gl/QHEIDK');

// And Label:

var label = new dsplay.Label();

container.add(label);

label.x = 80;

label.color = '#FFFFFF';

label.text = 'Hello world!';

```