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

drawRegion

Draws a rectangular region of an image.

layer.drawRegion(source, region, x, y, scale);

region Array [x, y, width, height]

source Image | Canvas | ImageBitmap

Example

playground({

  smoothing: false, 

  width: 160,
  height: 160,
  container: exampleContainer,

  create: function() {

    this.loadImages("planes");

  },

  render: function() {

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

    var sprite = [16, 58, 42, 34];

    this.layer.drawRegion(this.images.planes, sprite, 16, 16, 3);    
  }

});

Spritesheet:

FLChan dancing

Play with var dance to see more action

var layer = cq(160, 160).appendTo(document.body);

loadImages("flchan", function(images) {

  var dance = 1; /* pick a dance from 0 to 9*/
  var duration = 1;

  var lastTick = Date.now();

  setInterval(function loop()  {  

    layer.clear("#000");

    var delta = (Date.now() - lastTick) / 1000;

    var frame = 8 * (delta % duration / duration) | 0;

    var sprite = [frame * 110, dance * 128, 110, 128];
    layer.drawRegion(images.flchan, sprite, 0, 0);

  }, 16);

  var lastTick = Date.now(); 

});

This sprite comes from FLStudio and has been made by Uruido Web.



Have any questions? Don't hesitate to ask:

Post issues on github, support my work on gratipay author rezoner