In HTML5 canvas, what is the difference between the translate() and moveTo() javascript functions?

Question

I am currently learning to use canvas, and do not understand the difference between these two functions. From what I have read, the translate method 'moves the canvas'? Can someone explain this?

Edit: Is moveTo only used within the context of a path?

Answer 1

To be a little more specific than Kolink, since I think the explanation is a little muddy;

-The coordinate you pass moveTo is the starting point of a new line (or shape); As if picking up your pen off the paper and setting it in a new location (the new coordinates).

-The function of lineTo is what "move(s) the pen across the paper to draw a line" (to a new coordinate you've given it, since you need two points to draw a line, obviously)

-You can place multiple lineTo calls one after another and it will use the last point you ended on, to continue the line, like so:

ctx.moveTo(100,50);
ctx.lineTo(25,175);
ctx.lineTo(175,175);
ctx.lineTo(100,50);
ctx.stroke();

here's a simple fiddle showing the outcome: http://jsfiddle.net/fbZKu/ (you can even "fill" these shapes you make with ctx.fill()!)

-The use of translate is to move the canvas' (0,0) coordinate (upper left corner) to the new coordinate.

I hope that clears things up a bit more! Happy coding! :)

Answer 2

Imagine you are drawing on graph paper.

moveTo means you take your pen and move it across the paper to draw a line.

translate means you shift the position of the paper on the table.

They could not be more different functions.