Question

I do have a function that periodically refreshes a canvas element (game kind of situation).

One of the drawn objects is supposed to be able to rotate:

myObject = {};
...
myObject.radian = 0.75;
...

The problem I am facing now is that when I apply this rotation to my drawing routine by doing:

ctx.moveTo(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
ctx.rotate(myObject.radian);
ctx.drawImage(...

It does not set an absolute value of the rotation but adds it to the value used when processing the last frame. This would be no problem if I could calculate the delta by accessing the old rotation value, but when I console.log(ctx) it doesn’t seem to have any rotational information attached.

Is there any way to do this except for getting rid of the idea of being able to set a rotation for my Object and having to work with deltas instead? Thanks!

Answer 1

As demonstrated at http://sgdk2.enigmadream.com/ben/Mobile.html, you can (and as far as I can see, should) use the save and restore functions of the context to bracket your drawing functions so that you can perform drawing relative to the active state of the context and then return in to the expected state when you’re done. then you’re not leaving the context in an unknown state for other operations.

XFrame.prototype.draw = function(ctx, x, y) {
   ctx.save();
   ctx.transform(this.m11, this.m12, this.m21, this.m22, this.dx+x, this.dy+y);
   ctx.drawImage(this.imageSource, (this.cellIndex % this.graphicSheet.columns) * this.graphicSheet.cellWidth,
      Math.floor(this.cellIndex / this.graphicSheet.columns) * this.graphicSheet.cellHeight,
      this.graphicSheet.cellWidth, this.graphicSheet.cellHeight, 0, 0, this.graphicSheet.cellWidth, this.graphicSheet.cellHeight);
   ctx.restore();
};