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

align

Sets origin (rotation) point for image drawing methods

layer.align(x, y);

x, y : Number

Reset the align

What it does?

That's a common pattern for centering images:

layer.drawImage(image, x - image.width * 0.5, y - image.height * 0.5);

With align set to 0.5 the - image.width * 0.5 part is automatically added to a drawing position.

layer.align(0.5).drawImage(image, x, y).realign();

Example

See? The ship is always below the cursor. Because:

var app = playground({

  container: exampleContainer,

  create: function() {

    this.loadImages("ship");

  },

  render: function() {
    this.layer.clear("#000");
    this.layer.align(0.5, 0);
    this.layer.drawImage(this.images.ship, app.mouse.x, app.mouse.y);
  }

});

Understanding the align with rotation

var app = playground({

  container: exampleContainer,

  create: function() {

    this.loadImages("ship");

  },

  render: function() {

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

    this.layer
      .save()
      .translate(app.center.x, app.center.y)
      .align(0.5, 0) /* nose */
      .rotate(app.lifetime)
      .drawImage(this.images.ship, 0, 0)
      .restore();

  }

});


Have any questions? Don't hesitate to ask:

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