HTML5 Canvas Tutorial - HTML5 Canvas Transformations
Translate Transform
To translate the HTML5 Canvas context, we can use the translate() transform method.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!-- w ww. j av a2 s.c om-->
context.fillStyle = 'blue';
context.fillRect(0, 0, rectWidth, rectHeight);
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
context.fillStyle = 'red';
context.fillRect(0, 0, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Scale Transform
To scale the HTML5 Canvas, we can use the scale() method.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!--from www . j ava 2 s . c om-->
context.fillStyle = 'blue';
context.fillRect(10, 10, rectWidth, rectHeight);
// scale y component
context.scale(1, 0.5);
context.fillStyle = 'red';
context.fillRect(100, 100, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Oval
To create an oval using HTML5 Canvas, we scale a circle.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
<!-- w ww. j a v a2s . c o m-->
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Rotate Transform
To rotate a shape on the HTML5 Canvas,
we can use the rotate() method.
The rotate() method accepts an angle in radians.
To define the rotation point, we need to first translate the canvas context such that the top left corner of the context lies on the desired rotation point.
In the following code we translated the canvas context such that the top left corner of the context is directly on the center of the rectangle, which can rotate the rectangle from the center.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!-- ww w . j a va 2s. c o m-->
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 4);
context.fillStyle = 'red';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Custom Transform
To apply a custom transformation matrix to the HTML5 Canvas,
we can use the transform() method.
The transform() method accepts
six components of a 3 x 3 matrix according to the following convention:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!--from w w w. ja va 2s . com-->
// translation matrix:
// 1 0 tx
// 0 1 ty
// 0 0 1
var tx = canvas.width / 2;
var ty = canvas.height / 2;
// apply custom transform
context.transform(1, 0, 0, 1, tx, ty);
context.fillStyle = 'red';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Shear Transform
To shear the HTML5 canvas,
we can use the transform() method with the transformation matrix below.
sx defines the horizontal shear and sy defines the vertical shear.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// shear matrix:<!-- w w w . ja v a2 s. c om-->
// 1 sx 0
// sy 1 0
// 0 0 1
var sx = 0.75;// .75 horizontal shear
var sy = 0; // no vertical shear
// apply custom transform
context.transform(1, sy, sx, 1, 0, 0);
context.fillStyle = 'red';
context.fillRect(100, 100, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Mirror Transform
To create a mirror transform using HTML5 Canvas, we can apply a negative scale in the x direction to flip the context horizontally
We can apply a negative scale in the y direction to flip the context vertically.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- w ww . ja v a 2 s.co m-->
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
// flip context horizontally
context.scale(-1, 1);
context.font = '40pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'red';
context.fillText('Hi!', 0, 0);
</script>
</body>
</html>
The code above is rendered as follows:
Reset Transform
To restore the HTML5 Canvas transformation,
we can use the setTransform() method to
set the transformation matrix to its default state
using the following convention:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!--from w w w. j av a 2 s . c o m-->
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
context.fillStyle = 'red';
context.fillRect(0, 0, rectWidth, rectHeight);
// Reset Transform
// 1 0 0
// 0 1 0
// 0 0 1
// apply custom transform
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = 'blue';
context.fillRect(0, 0, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows:
Save and restore different transformation states
To save and restore different transformation states with the HTML5 Canvas,
we can use the save() and restore() methods of the canvas context.
In the following code, we save the transformation state by pushing the state onto the state stack.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
<!-- w w w .j av a 2 s . c o m-->
context.save();
// save state 1
context.translate(canvas.width / 2, canvas.height / 2);
context.save();
// save state 2
context.rotate(Math.PI / 4);
context.fillStyle = 'blue';
context.fillRect(10, 10, rectWidth, rectHeight);
context.restore();
context.fillStyle = 'red';
context.fillRect(10, 10, rectWidth, rectHeight);
</script>
</body>
</html>
The code above is rendered as follows: