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

Loading an image

With canvas you can use png, jpg and gif formats out of box. Nevertheless an image has to be loaded before use. The most convenient format is png as it provides transparency and lossless compression.

download this ship and put it in images/ship.png Add create event listener and tell it to load image Use drawImage(image, x, y) to display it

var app = playground({

  create: function() {



  ready: function() {

      ready event listener - if you want to do something
      when loader has finished the job


  render: function() {

    this.layer.drawImage(this.images.ship, 0, 0)





This will look for images/ship.png and put it in this.images.ship for easy access;

.png is a default extension and you don't have to provide it when loading an image

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

Read more about loading images in playground.

Ask question:

Fork me on GitHub