The CanvasRenderingContext2D.resetTransform()
method of the Canvas 2D API resets the current transform to the identity matrix.
CanvasRenderingContext2D.resetTransform()
Syntax
void ctx.resetTransform();
Examples
Resetting the matrix
This example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resetTransform()
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
The rotate()
method rotates the transformation matrix by 45°. The 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();
Result
Continuing with a regular matrix
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.
HTML
<canvas id="canvas"></canvas>
JavaScript
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);
Result
The skewed rectangles are gray, and the non-skewed rectangles are red.
Polyfill
You can also use the setTransform()
method to reset the current transform to the identity matrix, like so:
ctx.setTransform(1, 0, 0, 1, 0, 0);
Specifications
Specification |
---|
HTML Standard # dom-context-2d-resettransform-dev |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
resetTransform |
31
|
79
|
36
|
No
|
18
|
10.1
|
4.4
|
31
|
36
|
18
|
10.3
|
2.0
|
See also
- The interface defining this method:
CanvasRenderingContext2D
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform