Post
Ask Question

HTML5 Canvas Advanced: Part 3

Introduction

 
HTML5 Canvas Basic Composite.png
 
Welcome back to my "HTML5 Canvas Advanced" article series. In my previous article series, I explained the basic and advanced parts of transformation, you can read about them here:
In this article, we will learn about State Stacks, Shadows and some basics of composites.
 

State Stack

 
In an HTML5 Canvas, we can save and restore transformation states in a canvas context using the "save()" and "restore()" methods of it. These methods come from a concept known as a stack, it works like a container of objects where the objects are inserted and removed using a LIFO (Last-In-First-Out) process. In a similar way, the "save()" method adds an element to the top of the stack and the "restore()" method removes the item from the top. Let's use as an example a stack of books where you can remove only the top book from the stack and if you want to add a new book just put it on the top of the stack. [Reference Link] 
 
HTML5 Canvas Stack.png
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <canvas id="drawCanvas" width="500" height="450"></canvas>  
  5.             <script>  
  6.                 var drawCanvas = document.getElementById('drawCanvas');  
  7.                 var ctx = drawCanvas.getContext('2d');  
  8.                 gridDraw(ctx, '#333', 15, 15);  
  9.                  
  10.                 ctx.save();  
  11.                 //push 1 - orange  
  12.                 ctx.translate(250, 150);  
  13.    
  14.                 ctx.save();  
  15.                 //push 2 - blue  
  16.                 ctx.rotate(Math.PI / 4);  
  17.    
  18.                 ctx.save();  
  19.                 //push 3 - red  
  20.                 ctx.scale(1, 2.5);  
  21.    
  22.                 ctx.globalAlpha = 0.6;  
  23.                 ctx.fillStyle = "green";  
  24.                 ctx.fillRect(0, 0, 150, 100);  
  25.                 ctx.fill();  
  26.    
  27.                 ctx.restore();  
  28.                 //pop 3  
  29.                 ctx.fillStyle = "red";  
  30.                 ctx.fillRect(0, 50, 150, 100);  
  31.                 ctx.fill();  
  32.    
  33.                 ctx.restore();  
  34.                 //pop 2  
  35.                 ctx.fillStyle = "blue";  
  36.                 ctx.fillRect(0, 0, 150, 100);  
  37.                 ctx.fill();  
  38.    
  39.                 ctx.restore();  
  40.                 //pop 1  
  41.                 ctx.fillStyle = "#a51";  
  42.                 ctx.fillRect(0, 0, 150, 100);  
  43.                 ctx.fill();  
  44.             </script>  
  45.         </div>  
  46.     </form>  
  47. </body> 
Output
 
HTML5 Canvas State Stack.PNG
 

Drawing an Oval

 
In an HTML5 Canvas, we can create an oval by saving the context state, then stretch the context vertically, now draw a circle,  restore the canvas state that you saved, and finally apply to style to it. Let's see an example.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <canvas id="drawCanvas" width="450" height="500"></canvas>  
  5.    
  6.             <script>  
  7.                 var drawCanvas = document.getElementById('drawCanvas');  
  8.                 var ctx = drawCanvas.getContext('2d');  
  9.                 gridDraw(ctx, '#333', 15, 15);  
  10.                  
  11.                 // save context state  
  12.                 ctx.save();  
  13.    
  14.                 // it translate the context  
  15.                 ctx.translate(220, 250);  
  16.    
  17.                 // it scales context vertically  
  18.                 ctx.scale(1, 2);  
  19.                                  
  20.                 ctx.beginPath();  
  21.                 ctx.arc(0, 0, 100, 0, Math.PI * 2, false);  
  22.    
  23.                 // it will restore back to its initial state  
  24.                 ctx.restore();  
  25.    
  26.                 // it apply style to circle  
  27.                 ctx.fillStyle = '#f00';  
  28.                 ctx.fill();  
  29.    
  30.                 // it apply style to stroke  
  31.                 ctx.lineWidth = 8;  
  32.                 ctx.strokeStyle = 'blue';  
  33.                 ctx.stroke();             
  34.             </script>  
  35.         </div>  
  36.     </form>  
  37. </body> 
Output
 
HTML5 Canvas Draw an Oval.PNG
 

HTML5 Canvas, Basic Composites

 

Shadow

 
In HTML5 Canvas, we can add shadows with the canvas context using the following four properties:
  • shadowColor
  • shadowBlur
  • shadowOffsetX
  • shadowOffsetY
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Shadow-Mode" 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.rect(100, 125, 260, 150);  
  13.                 ctx.fillStyle = '#0f0';  
  14.                 ctx.fill();  
  15.                  
  16.                 var effect = function () {  
  17.                     ctx.rect(100, 125, 260, 150);  
  18.                     ctx.shadowColor = '#333';  
  19.                     ctx.shadowBlur = 20;  
  20.                     ctx.shadowOffsetX = 20;  
  21.                     ctx.shadowOffsetY = 20;  
  22.                     ctx.fill();  
  23.                 }  
  24.             </script>  
  25.         </div>  
  26.     </form>  
  27. </body> 
Output
 
 
HTML5 Canvas Shadow.PNG
 

Global Alpha

 
In HTML5 Canvas, we can set the opacity of other elements with the canvas context using the "globalAlpha" property of it. We can set the property of the canvas context to a real number between 0 and 1. Here, 0 is fully transparent and 1 is fully opaque.
 
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="button" id="button" value="Global AlphaSh-Mode" 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.beginPath();  
  13.                 ctx.rect(150, 120, 150, 150);  
  14.                 ctx.fillStyle = '#0f1';  
  15.                 ctx.fill();  
  16.    
  17.                 var effect = function () {  
  18.                     ctx.globalAlpha = 0.4;  
  19.                     ctx.beginPath();  
  20.                     ctx.arc(140, 125, 65, 0, 2 * Math.PI, false);  
  21.                     ctx.fillStyle = '#0af';  
  22.                     ctx.fill();  
  23.    
  24.                     ctx.globalAlpha = 0.5;  
  25.                     ctx.beginPath();  
  26.                     ctx.arc(300, 125, 65, 0, 2 * Math.PI, false);  
  27.                     ctx.fillStyle = '#00f';  
  28.                     ctx.fill();  
  29.    
  30.                     ctx.globalAlpha = 0.6;  
  31.                     ctx.beginPath();  
  32.                     ctx.arc(140, 270, 65, 0, 2 * Math.PI, false);  
  33.                     ctx.fillStyle = '#a0f';  
  34.                     ctx.fill();  
  35.    
  36.                     ctx.globalAlpha = 0.7;  
  37.                     ctx.beginPath();  
  38.                     ctx.arc(300, 270, 65, 0, 2 * Math.PI, false);  
  39.                     ctx.fillStyle = '#f00';  
  40.                     ctx.fill();  
  41.                 }  
  42.             </script>  
  43.         </div>  
  44.     </form>  
  45. </body> 
Output
 
HTML5 Canvas Global Alpha.PNG


Similar Articles