Canvas Transformations part 1

Working with Canvas

The Canvas element can be transformed. As an example, a text is written on the canvas at the coordinates (10, 30).

ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);Try It Yourself

Result:
The translate(x,y) method is used to move the Canvas.
x indicates how far to move the grid horizontally, and y indicates how far to move the grid vertically.

ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);Try It Yourself

In this example, the canvas is moved 100px to the right, and 150px down.
Result:
Canvas has several methods for drawing paths, boxes, circles, text, and adding images