What's the use of translate ?

Question

ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);

ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.fillText("after translate", 100, 150);

We obtain the same result with one less line of code so why do we have to use translate?

Answer 1

translate(x,y) moves the canvas coordinating system x left and y down…

Answer 2

translate moves the coords but then you have to draw something to see difference…… I suggest you clear the canvas on every cycle with clearRect, increase translate and then fill the text…… or use setTransform(1,0,0,1,100,150)

Answer 3

Okay thanks !
I've barely completed the basic HTML course so I don't know about the functions you are mentioning. I guess I have to get more knowledge before wanting to understand all the subtilites of the course about canvas.
Thanks again.
Have a nice day 😊

Answer 4

Thanks for your quick answer ! Do u mean we should be seeing the text moving with translate while with fillText it will be static ? Then why can't I see this difference in the output version?

Answer 5

@Coralie asked:
"We obtain the same result with one less line of code so why do we have to use translate?"

You're right into your reasonning, but to have the same result in your code, you would have to write:
ctx.fillText("after translate",110,180); // translate(100,150) + fillText('"...",10,30)

Maybe have you get this snippet from an example to demonstrate the behaviour of translate(), or something like?
Anyway, in more complexe case, translate() is useful to allow more readability of code and to handle relative coordinates instead of absolute ^^

Answer 6

@visph: Thanks I think I understand now 😊 This example is from the Sololearn HTML course.

Answer 7

to translate animation from a position to an other and we are able to modifie in the new animation