Transformation-in-Canvas
Transformation in Canvas
- Translate: Moves the canvas and its origin to a different point.
Syntax:
.translate(x,y)
Example:
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(110, 50, 100, 100);
context.translate(200, 120);
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);
</script>
Output:

- Rotate: Rotate the canvas around the current origin.
Syntax:
.rotate(angle)
Example:
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(0.785);
context.fillStyle = 'green';
context.fillRect(-50, -50, 100, 100);
</script>
Output:

- Scale: Scales the canvas horizontally and vertically.
Syntax:
.scale(x, y)
Example:
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'purple';
context.fillRect(50, 50, 100, 100);
context.scale(2, 0.5);
context.fillStyle = 'orange';
context.fillRect(50, 50, 100, 100);
</script>
Output:
