The methods we have for transforming the canvas are translate, scale, rotate and transformation matrix. Examples:
ctx.translate(50, 50); // translate 50 pixels in x and y direction ctx.rotate(45 * Math.PI / 180); // rotate 180 degrees ctx.scale(2, 1);
Note than when transform is defined, the entire canvas and the origin (0, 0) position is transformed, so all future drawing operations will be affected automatically. in CSS, the transform affects the element or elements you are targeting. In canvas, there is no concept of an element. Everything is either the canvas itself or raw pixels. If you wish to draw something rotated (or scaled or translated), you transform the canvas first and then draw whatever you were planning on drawing.
The easiest way to reset a transform is to call the resetTransform method:
ctx.resetTransform();
Canvas state can be saved and restored by save() and restore() functions.