files/en-us/web/api/canvasrenderingcontext2d/resettransform/index.md
{{APIRef("Canvas API")}}
The
CanvasRenderingContext2D.resetTransform()
method of the Canvas 2D API resets the current transform to the identity matrix.
resetTransform()
None.
None ({{jsxref("undefined")}}).
This example draws a rotated rectangle after modifying the matrix, and then resets the
matrix using the resetTransform() method.
<canvas id="canvas"></canvas>
The {{domxref("CanvasRenderingContext2D.rotate()", "rotate()")}} method rotates the transformation matrix by 45°. The {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} method draws a filled rectangle, adjusted according to that matrix.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Draw a rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);
// Reset transformation matrix to the identity matrix
ctx.resetTransform();
{{ EmbedLiveSample('Resetting_the_matrix', 700, 180) }}
Whenever you're done drawing transformed shapes, you should call
resetTransform() before rendering anything else. In this example, the first
two shapes are drawn with a skew transformation, and the last two are drawn with the
identity (regular) transformation.
<canvas id="canvas"></canvas>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Skewed rectangles
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);
The skewed rectangles are gray, and the non-skewed rectangles are red.
{{ EmbedLiveSample('Continuing_with_a_regular_matrix', 700, 180) }}
You can also use the {{domxref("CanvasRenderingContext2D.setTransform()", "setTransform()")}} method to reset the current transform to the identity matrix, like so:
ctx.setTransform(1, 0, 0, 1, 0, 0);
{{Specifications}}
{{Compat}}