HTML5 Canvas Advance: Part 2

Introduction

Welcome back. This is the second part of the HTML5 Canvas Advanced series. In my previous article, I talked about basic transformations, like rotation, translation, and scaling. Now in today's article, we cover some advanced topics of transformations, like custom transformations, shearing, mirroring and so on. Before starting our article, I would like to talk about the grid we used in the previous article and we will also use it in this article. Let us see how to make a grid with an example.

Grid Example: Live Demo

<body>
<form id="form1" runat="server">
<div>
<input type="button" id="button" value="Generate Grid" onclick="generateGrid()" /><br />
<canvas id="drawCanvas" width="500" height="400"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
var gridDraw = function (ctx, color, x_axis, y_axis) {
ctx.strokeStyle = color;
ctx.lineWidth = 0.5;
for (var i = x_axis + 0.5; i < ctx.canvas.width; i += x_axis) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, ctx.canvas.height);
ctx.stroke();
}
for (var i = y_axis + 0.5; i < ctx.canvas.height; i += y_axis) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(ctx.canvas.width, i);
ctx.stroke();
}
}
var generateGrid = function () {
gridDraw(ctx, '#000', 10, 10);
}
</script>
</div>
</form>
</body>

Output

Custom Transform

In HTML5 Canvas, the transform() method applies a custom transformation matrix to the canvas context. The "transform" method requires six parameters that are as follows:

m11 - It scales the drawing horizontally
m12 - It skews the drawing horizontally
m21 - It skews the drawing vertically
m22 - It scales the drawing vertically
dx - It moves the drawing horizontally
dy - It moves the drawing vertically

Now we can use the "transform(m11, m12, m21, m22, dx, dy)" method. It multiplies the current transformation matrix with the matrix described by:

m11 m21 dx

m12 m22 dy

0 0 1

It is important to know that the transformation will affect only those shapes drawn after the "transform()" method. Here, the scale m11 and scale m22 are decimal percentages, so 1 = 100%, where as .5 = 50% and 2 = 200%. The other values will add a transformation, so 0 means no change and then a positive or negative number will make a change.

Example: Live Demo

<body>
<form id="form1" runat="server">
<div>
<input type="button" id="button" value="Transform" onclick="effect()" /><br />
<canvas id="drawCanvas" width="500" height="400"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
gridDraw(ctx, '#333', 15, 15);
ctx.fillStyle = "#ff0000";
ctx.fillRect(200, 10, 200, 100);
var effect = function () {
ctx.transform(1, 0.5, -0.5, 1, -10, -10);
ctx.fillStyle = "#0000ff";
ctx.fillRect(200, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, -10, -10);
ctx.fillStyle = "#00ff00";
ctx.fillRect(200, 10, 200, 100);
}
</script>
</div>
</form>
</body>

Output

Reset Transform

In HTML5 Canvas, the "setTransform()" method resets the canvas transformation matrix. This method also requires six parameters that are the same as the transform() method. The setTransform() method resets the current transformation to its default state, and you need to then run the transform() method with the same parameters.

Here also, the transformation will affect only those shapes drawn after the "setTransform()" method.

Example: Live Demo

<body>
<form id="form1" runat="server">
<div>
<input type="button" id="button" value="Reset Transform" onclick="effect()" /><br />
<canvas id="drawCanvas" width="500" height="400"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
gridDraw(ctx, '#333', 15, 15);
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 10, 280, 100);
var effect = function () {
ctx.setTransform(1, 0.5, -0.5, 1, 10, -30);
ctx.fillStyle = "#00ff00";
ctx.fillRect(10, 20, 260, 100);
ctx.setTransform(1, 1, -0.5, 1, 10, 0);
ctx.fillStyle = "#0000ff";
ctx.fillRect(20, 30, 250, 100);
}
</script>
</div>
</form>
</body>

Output

Shear

In HTML5 Canvas, the "transform()" method shears the canvas context. We can use it with the transformation matrix that is given below. Here, the "horizontal shear" defines by "sx" and the "vertical shear" defines by "sy".

1 sx 0

sy 1 0

0 0 1

Example: Live Demo

<body>
<form id="form1" runat="server">
<div>
<input type="button" id="button" value="Shear" onclick="effect()" /><br />
<canvas id="drawCanvas" width="450" height="400"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
gridDraw(ctx, '#333', 15, 15);
ctx.fillStyle = "#ff0000";
ctx.fillRect(10, 10, 150, 100);
var effect = function () {
ctx.translate(200, 100);
ctx.transform(1, 0, -1.25, 1, 0, 0);
ctx.fillStyle = "#00ff00";
ctx.fillRect(10, 10, 150, 100);
}
</script>
</div>
</form>
</body>

Output

Mirror

In HTML5 Canvas, we can create a mirror effect or transform using the "scale()" method, to apply such effect we need to give a negative scale value in the "x-direction" so that it flips the context horizontally. We can also give a negative scale value in the "y-direction" that flips the context vertically.

Example: Live Demo

<body>
<form id="form1" runat="server">
<div>
<input type="button" id="button" value="Mirror" onclick="effect()" /><br />
<canvas id="drawCanvas" width="450" height="400"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
gridDraw(ctx, '#333', 15, 15);
ctx.font = 'bold 70pt Courier New';
ctx.fillStyle = '#ff00ff';
ctx.fillText('Mirror', 50,100);
var effect = function () {
ctx.translate(200, 250);
ctx.scale(-1, 1);
ctx.font = 'bold 70pt Courier New';
ctx.textAlign = 'center';
ctx.fillStyle = '#0000ff';
ctx.fillText('Mirror', 0, 0);
}
</script>
</div>
</form>
</body>

Output