Diego Diego - 5 months ago 10
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

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).

Comments