Diego Diego - 1 year ago 62
Javascript Question

How to set CANVAS back to 0 in the X or Horizontal Axis

I'm making an animation and I'm using canvas to draw a background which moves from right to left and in order to move the canvas I redraw it with a translate value using a setInterval:


So the Canvas moves to the left -$gap distance every time the setInterval is fire off. Move canvas this way is easy to achive, but how can I set the Canvas back to zero in the X Axis, like context.x(0), like before the first -$gap distance has been applied.

Thanks for any guideline.

Thanks for any guideline.

Answer Source

Simply reset the matrix by initializing it with an identity matrix, or in code:


where the two latter values represents translation (x, y).