JavaScript Canvas resetTransform Tutorial
last modified April 3, 2025
In this article, we explore the Canvas resetTransform method in JavaScript. This method resets the current transformation matrix to the identity matrix. It's essential for managing complex transformations in canvas drawings.
Basic Definition
The resetTransform method resets the current transformation to
the identity matrix. This means it removes all scaling, rotation, and
translation transformations applied to the canvas context.
When called, it sets the transformation matrix to [[1,0,0], [0,1,0], [0,0,1]].
This is equivalent to calling setTransform(1,0,0,1,0,0) but more
readable and convenient.
Basic resetTransform Usage
This example demonstrates how to use resetTransform after applying some transformations.
<!DOCTYPE html>
<html>
<head>
<title>Basic resetTransform</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Apply transformations
ctx.translate(100, 50);
ctx.rotate(Math.PI/4);
ctx.scale(2, 2);
// Draw a rectangle with transformations
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 50, 50);
// Reset transformations
ctx.resetTransform();
// Draw a rectangle without transformations
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50);
</script>
</body>
</html>
In this example, we first apply translation, rotation, and scaling to the canvas context. Then we draw a blue rectangle that gets transformed.
After calling resetTransform, we draw a red rectangle that appears
in its original position and size. This shows how resetTransform clears all
previous transformations.
Nested Transformations with resetTransform
This example shows how to use resetTransform to manage nested transformations.
<!DOCTYPE html>
<html>
<head>
<title>Nested Transformations</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First transformation state
ctx.translate(100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 50, 50);
// Save state and apply new transformations
ctx.save();
ctx.translate(100, 0);
ctx.rotate(Math.PI/4);
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 50, 50);
// Reset to saved state (alternative to resetTransform)
ctx.restore();
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50);
// Completely reset all transformations
ctx.resetTransform();
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 50, 50);
</script>
</body>
</html>
This example demonstrates the difference between resetTransform
and restore. The restore method returns to a saved state, while
resetTransform completely resets all transformations.
We first apply a translation, then save the state. After applying more transformations, we restore to the saved state. Finally, we completely reset all transformations with resetTransform.
resetTransform with Animation
This example shows how resetTransform can be used in animation loops.
<!DOCTYPE html>
<html>
<head>
<title>Animation with resetTransform</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animate() {
// Clear canvas
ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Apply transformations
ctx.translate(200, 150);
ctx.rotate(angle);
angle += 0.01;
// Draw rotating rectangle
ctx.fillStyle = 'purple';
ctx.fillRect(-25, -25, 50, 50);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
In this animation example, we use resetTransform at the start of each frame to clear the canvas completely. This ensures no residual transformations affect the clearRect operation.
After resetting, we apply new transformations for the current frame. This pattern is common in canvas animations to maintain clean state between frames.
resetTransform vs setTransform
This example compares resetTransform with setTransform for resetting the matrix.
<!DOCTYPE html>
<html>
<head>
<title>resetTransform vs setTransform</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Apply transformations
ctx.translate(100, 50);
ctx.scale(2, 2);
// Method 1: Using resetTransform
ctx.resetTransform();
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50);
// Apply transformations again
ctx.translate(100, 50);
ctx.scale(2, 2);
// Method 2: Using setTransform
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 50, 50);
</script>
</body>
</html>
This example demonstrates that resetTransform and
setTransform(1,0,0,1,0,0) are functionally equivalent.
Both methods reset the transformation matrix to the identity matrix.
The resetTransform method is more readable and easier to remember than the equivalent setTransform call. It was introduced to simplify this common operation.
Complex Transformation Management
This example shows how resetTransform helps manage complex transformation scenarios.
<!DOCTYPE html>
<html>
<head>
<title>Complex Transformations</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
function drawHouse(x, y, color) {
ctx.save();
ctx.translate(x, y);
// House base
ctx.fillStyle = color;
ctx.fillRect(0, 0, 100, 80);
// Roof
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, -40);
ctx.lineTo(100, 0);
ctx.closePath();
ctx.fill();
// Door
ctx.resetTransform();
ctx.translate(x, y);
ctx.fillStyle = 'brown';
ctx.fillRect(40, 40, 20, 40);
ctx.restore();
}
drawHouse(50, 100, 'lightblue');
drawHouse(200, 150, 'pink');
drawHouse(350, 80, 'lightgreen');
</script>
</body>
</html>
In this complex example, we use resetTransform to manage different parts of a drawing independently. The house drawing function uses transformations for positioning but resets them for certain elements.
The roof is drawn relative to the initial translation, while the door uses resetTransform to start fresh from the base position. This shows how resetTransform can provide precise control over transformation states.
Source
MDN Canvas resetTransform Documentation
In this article, we have explored the resetTransform method and its uses in managing canvas transformations. This method is essential for maintaining control over complex drawing operations and animations.
Author
List all JS Canvas tutorials.