This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Drawing

By default playground comes with Canvas based renderer that provides a very straightforward API for drawing in 2D.

Bind render event listener and clear the screen.

var app = playground({

  render: function() {

    this.layer.clear("#000088");

  }

});

All drawing is performed by accessing this.layer which is a wrapper for canvas element.

Let's draw a simple rectangle.

Use this.layer.fillRect(x, y, width, height) to draw a rectangle

var app = playground({

  render: function() {

    this.layer.clear("#000088");
    this.layer.fillStyle("#ffffff");
    this.layer.fillRect(32, 32, 64, 64);

  }

});

If you want to play some more with primitive drawing on yourself try these:

  1. .fillCircle(x, y, radius)
  2. .strokeStyle(color)
  3. .strokeLine(x, y, ex, ey)
  4. .strokeRect(x, y, width, height)
  5. .lineWidth(width)

When you are done find me in Loading an image section.

Ask question:

Fork me on GitHub