HTML5 Canvas Advance: Part 2

222.png

Welcome back. This is the second part of the HTML5 Canvas Advanced series. In my previous article, I talked about the 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:

 1.PNG

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 skew the drawing horizontally
  • m21 - It skew 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

2.PNG

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

3.PNG

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

4.PNG

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

5.PNG