Diego Diego - 1 year ago 57
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:

context.translate(-$gap,0);


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.

K3N K3N
Answer Source

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

context.setTransform(1,0,0,1,0,0);

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