Post
Ask Question

Create Different Composition on Canvas Using HTML5

Introduction

 
This is a simple application for beginners that shows how to use various compositions on canvas using HTML5. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to use various compositions on a canvas application. <canvas> is an HTML element which can be used to draw graphics using scripting. It can be used to draw graphs to make photo compositions or do simple animations. The <canvas> element is a bitmap drawing API and once you have committed to a set of pixels you are stuck with them. Canvas is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create various compositions on canvas using HTML5 tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "canvas".
wakakakakak.gif
 
Step 2: Create a folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "joy".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "composition.aspx".
new.gif
 
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Demo.html".
html.gif
 
Step 5: Now in this step we define a function named drawshape(). In a function we set a rectangle and set a color of a rectangle.
 
Code
  1. function drawShape()  
  2.       {  
  3.     for (i = 0; i < rxt.length; i++)  
  4.        {  
  5.     var label = document.createTextNode(rxt[i]);  
  6.     document.getElementById('lab' + i).appendChild(label);  
  7.     var canvas = document.getElementById('tut' + i).getContext('2d');  
  8.     canvas.fillStyle = "green";  
  9.     canvas.fillRect(15, 15, 70, 70);  
  10.     canvas.globalCompositeOperation = rxt[i];  
  11.     canvas.fillStyle = "#ff3399";  
  12.     canvas.beginPath();  
  13.     canvas.arc(75, 75, 35, 0, Math.PI * 2, true);  
  14.     canvas.fill();  
  15.         }  
  16.  }    
Step 6: Now in this step we set a structure of a table that used to display a different type of composition in a formatted way.
 
Code
  1. <table border="1" align="center" bgcolor="#FF99FF">  
  2.    <tr>  
  3.    <td><canvas id="tut0" width="150" height="150"></canvas><br/>  
  4.    <label id="lab0"></label>  
  5.    </td>  
  6.    <td><canvas id="tut1" width="150" height="150"></canvas><br/>  
  7.    <label id="lab1"></label>  
  8.    </td>  
  9.    <td><canvas id="tut2" width="150" height="150"></canvas><br/>  
  10.    <label id="lab2"></label>  
  11.    </td>  
  12.    </tr>  
  13.    <tr>  
  14.    <td><canvas id="tut3" width="150" height="150"></canvas><br/>  
  15.    <label id="lab3"></label>  
  16.    </td>  
  17.    <td><canvas id="tut4" width="150" height="150"></canvas><br/>  
  18.    <label id="lab4"></label>  
  19.    </td>  
  20.    <td><canvas id="tut5" width="150" height="150"></canvas><br/>  
  21.    <label id="lab5"></label>  
  22.    </td>  
  23.    </tr>  
  24.    <tr>  
  25.    <td><canvas id="tut6" width="150" height="150"></canvas><br/>  
  26.      <label id="lab6"></label>  
  27.   </td>  
  28.   <td><canvas id="tut7" width="150" height="150"></canvas><br/>  
  29.   <label id="lab7"></label>  
  30.   </td>  
  31.   <td><canvas id="tut8" width="150" height="150"></canvas><br/>  
  32.   <label id="lab8"></label>  
  33.   </tr>  
  34.   <tr>  
  35.   </td>  
  36.   <td><canvas id="tut9" width="150" height="150"></canvas><br/>  
  37.   <label id="lab9"></label>  
  38.   </td>  
  39.   <td><canvas id="tut10" width="150" height="150"></canvas><br/>  
  40.   <label id="lab10"></label>  
  41.   </td>  
  42.   <td><canvas id="tut11" width="150" height="150"></canvas><br/>  
  43.   <label id="lab11"></label>  
  44.     </td>  
  45.   </tr>  
  46. </table> 
Step 7:  Now in this step we set a variable named "rxt" used to set the name of composition.
 
Code
  1. var rxt = [  
  2.   'source-over', 'source-in', 'source-out', 'source-atop',  
  3.   'destination-over', 'destination-in', 'destination-out',  
  4.   'destination-atop', 'lighter', 'darker', 'copy', 'xor'  
  5. ]; 
Step 8: The complete demonstration of a different composition application is given below.
 
Code
  1. <html>  
  2.    <head>  
  3.       <title>Tom developed html 5 application</title>  
  4.       <script type="text/javascript">  
  5.          var rxt = [  
  6.            
  7.          'source-over', 'source-in', 'source-out', 'source-atop',  
  8.            
  9.          'destination-over', 'destination-in', 'destination-out',  
  10.            
  11.          'destination-atop', 'lighter', 'darker', 'copy', 'xor'  
  12.            
  13.          ];  
  14.            
  15.       </script>  
  16.       function drawShape()  
  17.       {  
  18.       for (i = 0; i < rxt.length; i++)  
  19.       {  
  20.       var label = document.createTextNode(rxt[i]);  
  21.       document.getElementById('lab' + i).appendChild(label);  
  22.       var canvas = document.getElementById('tut' + i).getContext('2d');  
  23.       canvas.fillStyle = "green";  
  24.       canvas.fillRect(15, 15, 70, 70);  
  25.       canvas.globalCompositeOperation = rxt[i];  
  26.       canvas.fillStyle = "#ff3399";  
  27.       canvas.beginPath();  
  28.       canvas.arc(75, 75, 35, 0, Math.PI * 2, true);  
  29.       canvas.fill();  
  30.       }  
  31.       }   
  32.    </head>  
  33.    <body onload="drawShape();" bgcolor="#804040">  
  34.       <h1></h1>  
  35.       <table border="1" align="center" bgcolor="#FF99FF">  
  36.          <tr>  
  37.             <td>  
  38.                <canvas id="tut0" width="150" height="150"></canvas>  
  39.                <br/>  
  40.                <label id="lab0"></label>  
  41.             </td>  
  42.             <td>  
  43.                <canvas id="tut1" width="150" height="150"></canvas>  
  44.                <br/>  
  45.                <label id="lab1"></label>  
  46.             </td>  
  47.             <td>  
  48.                <canvas id="tut2" width="150" height="150"></canvas>  
  49.                <br/>  
  50.                <label id="lab2"></label>  
  51.             </td>  
  52.          </tr>  
  53.          <tr>  
  54.             <td>  
  55.                <canvas id="tut3" width="150" height="150"></canvas>  
  56.                <br/>  
  57.                <label id="lab3"></label>  
  58.             </td>  
  59.             <td>  
  60.                <canvas id="tut4" width="150" height="150"></canvas>  
  61.                <br/>  
  62.                <label id="lab4"></label>  
  63.             </td>  
  64.             <td>  
  65.                <canvas id="tut5" width="150" height="150"></canvas>  
  66.                <br/>  
  67.                <label id="lab5"></label>  
  68.             </td>  
  69.          </tr>  
  70.          <tr>  
  71.             <td>  
  72.                <canvas id="tut6" width="150" height="150"></canvas>  
  73.                <br/>  
  74.                <label id="lab6"></label>  
  75.             </td>  
  76.             <td>  
  77.                <canvas id="tut7" width="150" height="150"></canvas>  
  78.                <br/>  
  79.                <label id="lab7"></label>  
  80.             </td>  
  81.             <td>  
  82.                <canvas id="tut8" width="150" height="150"></canvas>  
  83.                <br/>  
  84.                <label id="lab8"></label>  
  85.          </tr>  
  86.          <tr>  
  87.             </td>  
  88.             <td>  
  89.                <canvas id="tut9" width="150" height="150"></canvas>  
  90.                <br/>  
  91.                <label id="lab9"></label>  
  92.             </td>  
  93.             <td>  
  94.                <canvas id="tut10" width="150" height="150"></canvas>  
  95.                <br/>  
  96.                <label id="lab10"></label>  
  97.             </td>  
  98.             <td>  
  99.                <canvas id="tut11" width="150" height="150"></canvas>  
  100.                <br/>  
  101.                <label id="lab11"></label>  
  102.             </td>  
  103.          </tr>  
  104.       </table>  
  105.    </body>  
  106. </html> 
Step 9:  Press Ctrl + F5 to run the application in a browser.
 
Output
 
11.gif
22.gif
33.gif
Resources
 
Here are some useful resources


Similar Articles