Post
Ask Question

HTML5 Canvas Advance: Part 2

Introduction

 
222.png
 
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
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.      <div>  
  4.             <input type="button" id="button" value="Generate Grid" onclick="generateGrid()" /><br />  
  5.             <canvas id="drawCanvas" width="500" height="400"></canvas>  
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.    
  10.                 var gridDraw = function (ctx, color, x_axis, y_axis) {  
  11.                     ctx.strokeStyle = color;  
  12.                     ctx.lineWidth = 0.5;  
  13.    
  14.                     for (var i = x_axis + 0.5; i < ctx.canvas.width; i += x_axis) {  
  15.                         ctx.beginPath();  
  16.                         ctx.moveTo(i, 0);  
  17.                         ctx.lineTo(i, ctx.canvas.height);  
  18.                         ctx.stroke();  
  19.                     }  
  20.    
  21.                     for (var i = y_axis + 0.5; i < ctx.canvas.height; i += y_axis) {  
  22.                         ctx.beginPath();  
  23.                         ctx.moveTo(0, i);  
  24.                         ctx.lineTo(ctx.canvas.width, i);  
  25.                         ctx.stroke();  
  26.                     }  
  27.                 }  
  28.    
  29.                 var generateGrid = function () {  
  30.                     gridDraw(ctx, '#000', 10, 10);  
  31.                 }  
  32.             </script>  
  33.         </div>  
  34.     </form>  
  35. </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 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
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Transform" onclick="effect()" /><br />  
  5.             <canvas id="drawCanvas" width="500" height="400"></canvas>  
  6.    
  7.             <script>  
  8.                 var drawCanvas = document.getElementById('drawCanvas');  
  9.                 var ctx = drawCanvas.getContext('2d');  
  10.                 gridDraw(ctx, '#333', 15, 15);  
  11.    
  12.                 ctx.fillStyle = "#ff0000";  
  13.                 ctx.fillRect(200, 10, 200, 100);  
  14.    
  15.                 var effect = function () {  
  16.                     ctx.transform(1, 0.5, -0.5, 1, -10, -10);  
  17.                     ctx.fillStyle = "#0000ff";  
  18.                     ctx.fillRect(200, 10, 200, 100);  
  19.    
  20.                     ctx.transform(1, 0.5, -0.5, 1, -10, -10);  
  21.                     ctx.fillStyle = "#00ff00";  
  22.                     ctx.fillRect(200, 10, 200, 100);   
  23.                 }  
  24.             </script>  
  25.         </div>  
  26.     </form>  
  27. </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
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Reset Transform" onclick="effect()" /><br />  
  5.             <canvas id="drawCanvas" width="500" height="400"></canvas>  
  6.    
  7.              <script>  
  8.                  var drawCanvas = document.getElementById('drawCanvas');  
  9.                  var ctx = drawCanvas.getContext('2d');  
  10.                  gridDraw(ctx, '#333', 15, 15);  
  11.    
  12.                  ctx.fillStyle = "#ff0000";  
  13.                  ctx.fillRect(0, 10, 280, 100);  
  14.    
  15.                  var effect = function () {  
  16.                      ctx.setTransform(1, 0.5, -0.5, 1, 10, -30);  
  17.                      ctx.fillStyle = "#00ff00";  
  18.                      ctx.fillRect(10, 20, 260, 100);  
  19.    
  20.                      ctx.setTransform(1, 1, -0.5, 1, 10, 0);  
  21.                      ctx.fillStyle = "#0000ff";  
  22.                      ctx.fillRect(20, 30, 250, 100);  
  23.                  }  
  24.             </script>  
  25.         </div>  
  26.     </form>  
  27. </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
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Shear" onclick="effect()" /><br />  
  5.             <canvas id="drawCanvas" width="450" height="400"></canvas>  
  6.    
  7.             <script>  
  8.                 var drawCanvas = document.getElementById('drawCanvas');  
  9.                 var ctx = drawCanvas.getContext('2d');  
  10.                 gridDraw(ctx, '#333', 15, 15);  
  11.    
  12.                 ctx.fillStyle = "#ff0000";  
  13.                 ctx.fillRect(10, 10, 150, 100);  
  14.    
  15.                 var effect = function () {  
  16.                     ctx.translate(200, 100);  
  17.                     ctx.transform(1, 0, -1.25, 1, 0, 0);  
  18.    
  19.                     ctx.fillStyle = "#00ff00";  
  20.                     ctx.fillRect(10, 10, 150, 100);  
  21.                 }  
  22.             </script>  
  23.         </div>  
  24.     </form>  
  25. </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
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Mirror" onclick="effect()" /><br />  
  5.             <canvas id="drawCanvas" width="450" height="400"></canvas>  
  6.    
  7.             <script>  
  8.                 var drawCanvas = document.getElementById('drawCanvas');  
  9.                 var ctx = drawCanvas.getContext('2d');  
  10.                 gridDraw(ctx, '#333', 15, 15);  
  11.    
  12.                 ctx.font = 'bold 70pt Courier New';  
  13.                 ctx.fillStyle = '#ff00ff';  
  14.                 ctx.fillText('Mirror', 50,100);  
  15.    
  16.                 var effect = function () {  
  17.                     ctx.translate(200, 250);  
  18.                     ctx.scale(-1, 1);  
  19.                     ctx.font = 'bold 70pt Courier New';  
  20.                     ctx.textAlign = 'center';  
  21.                     ctx.fillStyle = '#0000ff';  
  22.                     ctx.fillText('Mirror', 0, 0);  
  23.                      
  24.                 }  
  25.             </script>  
  26.         </div>  
  27.     </form>  
  28. </body> 
Output
 
5.PNG


Similar Articles