Introduction

This is a simple application for beginners that shows how to create an animated rotating rectangle 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 create an animated rotating rectangle on 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 a HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create an animated rotating rectangle on canvas using HTML5 tools.
Step 1: First open a 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 set a style used to set a border and body of a canvas.
Code
  1. <style type="text/css">
  2. body
  3. {
  4. margin: 10px;
  5. padding: 10px;
  6. }
  7. #myCanvas
  8. {
  9. border: 1px solid #00ff99;
  10. background-color:Green;
  11. }
  12. </style>
Step 6: Now in this step we set a rectangle height width and set a color of a rectangle.
Code
  1. var BR = new Kinetic.Rect(
  2. {
  3. x: 50,
  4. y: 75,
  5. width: 100,
  6. height: 50,
  7. fill: "#ff66ff",
  8. stroke: "black",
  9. strokeWidth: 4
  10. });
  11. var YR = new Kinetic.Rect({
  12. x: 220,
  13. y: 75,
  14. width: 100,
  15. height: 50,
  16. fill: "#0000a0",
  17. stroke: "black",
  18. strokeWidth: 4,
  19. centerOffset: {
  20. x: 50,
  21. y: 25
  22. }
  23. });
  24. var RR = new Kinetic.Rect({
  25. x: 400,
  26. y: 75,
  27. width: 100,
  28. height: 50,
  29. fill: "#ff8080",
  30. stroke: "black",
  31. strokeWidth: 4,
  32. centerOffset: {
  33. x: -100,
  34. y: 0
  35. }
  36. });
Step 7: Now in this step we add a rectangle color on a layer.
Code
  1. L.add(BR);
  2. L.add(YR);
  3. L.add(RR);
  4. stage.add(L);
  5. stage.onFrame(function (frame)
  6. {
  7. BR.rotate(Math.PI / 100);
  8. YR.rotate(Math.PI / 100);
  9. RR.rotate(Math.PI / 100);
  10. L.draw();
  11. });
Step 8: The demo of complete application code is given below.
Code
  1. <html>
  2. <head>
  3. <title>Tom application</title>
  4. <style type="text/css">
  5. body
  6. {
  7. margin: 10px;
  8. padding: 10px;
  9. }
  10. #myCanvas
  11. {
  12. border: 1px solid #00ff99;
  13. background-color:Green;
  14. }
  15. </style>
  16. <script type="text/jscript" src="Scripts/JScript.js">
  17. </script>
  18. <script type="text/javascript">
  19. window.onload = function ()
  20. {
  21. var stage = new Kinetic.Stage("container", 600, 300);
  22. var L = new Kinetic.L();
  23. var BR = new Kinetic.Rect(
  24. {
  25. x: 50,
  26. y: 75,
  27. width: 100,
  28. height: 50,
  29. fill: "#ff66ff",
  30. stroke: "black",
  31. strokeWidth: 4
  32. });
  33. var YR = new Kinetic.Rect({
  34. x: 220,
  35. y: 75,
  36. width: 100,
  37. height: 50,
  38. fill: "#0000a0",
  39. stroke: "black",
  40. strokeWidth: 4,
  41. centerOffset: {
  42. x: 50,
  43. y: 25
  44. }
  45. });
  46. var RR = new Kinetic.Rect({
  47. x: 400,
  48. y: 75,
  49. width: 100,
  50. height: 50,
  51. fill: "#ff8080",
  52. stroke: "black",
  53. strokeWidth: 4,
  54. centerOffset: {
  55. x: -100,
  56. y: 0
  57. }
  58. });
  59. L.add(BR);
  60. L.add(YR);
  61. L.add(RR);
  62. stage.add(L);
  63. stage.onFrame(function (frame)
  64. {
  65. BR.rotate(Math.PI / 100);
  66. YR.rotate(Math.PI / 100);
  67. RR.rotate(Math.PI / 100);
  68. L.draw();
  69. });
  70. </script>
  71. </head>
  72. <body onmousedown="return false;" bgcolor="#400000">
  73. <h1 style="background-color: #8080FF">Tom developed a Rotated Rectangle</h1>
  74. <div id="container">
  75. </div>
  76. </body>
  77. </html>
Step 9: Press Ctrl+ F5 to run the code in a browser.
Output
2.gif
3.gif
1.gif
4.gif
Resources
Here is some useful resources