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.
wakakakakak.gif
Step 2: Create a folder on a desktop.
folder.gif
Step 3: Open Visual Studio.
new.gif
webapplication.gif
Step 4: Add an HTML file to your web application.
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 = [
  7. 'source-over', 'source-in', 'source-out', 'source-atop',
  9. 'destination-over', 'destination-in', 'destination-out',
  11. 'destination-atop', 'lighter', 'darker', 'copy', 'xor'
  13. ];
  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