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

stars

Save, Translate, Align, Rotate, Scale

There is a pattern in canvas that you will be using over and over again:

layer
  .save()
  .translate(x, y)
  .rotate(rotation)
  .scale(scaleX, scaleY)
  .drawImage(image, -image.width * alignX, -image.height * alignY)
  .restore();

Using stars we can reduce it to

layer
  .stars(x, y, alignX, alignY, rotation, scale)
  .drawImage(image, 0, 0)
  .restore();

Defaults

.stars(x, y, alignX = 0.5, alignY = 0.5, rotation = 0, scale = 1.0)

You can also split the scale

.stars(x, y, alignX = 0.5, alignY = 0.5, rotation = 0, scaleX, scaleY)

Tars

There is also tars() which doesn't call save()

.tars(x, y, alignX, alignY, rotation, scale)

Example

var app = playground({

  create: function() {

    this.loadAtlases("planet");

  },

  render: function() {

    var atlas = this.atlases.planet;
    var current = (this.lifetime % 2 / 2) * atlas.frames.length | 0;


    this.layer
      .clear()    
      .stars(app.center.x, app.center.y, 0.5, 0.5, 0, 2.0)
      .drawAtlasFrame(atlas, current, 0, 0)
      .restore();

  },

  container: exampleContainer

});


Have any questions? Don't hesitate to ask:

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