Introduction

This is a simple application for beginners that shows how to create a harmonic oscillator 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 a harmonic oscillator on a canvas application. The <canvas> tag 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 a harmonic oscillator 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 set a style used to set a border and body of a canvas.
Code
  1. <style type="text/css">
  3. body {
  4. margin: 0px;
  5. padding: 0px;
  6. }
  8. #myCanvas {
  9. border: 1px solid #00ff99;
  10. background-color: Green;
  11. }
  13. </style>
Step 6 : Now in this step we set a callback time on windows.
Code
  1. window.requestAnimFrame = (function(callback) {
  2. return window.requestAnimationFrame ||
  3. window.webkitRequestAnimationFrame ||
  4. window.mozRequestAnimationFrame ||
  5. window.oRequestAnimationFrame ||
  6. window.msRequestAnimationFrame ||
  7. function(callback) {
  8. window.setTimeout(callback, 1000 / 60);
  9. };
  10. })();
Step 7: Now in this step we create a function named drawWeight that is used to set all the properties of a rectangle.
Code
  1. function drawWeight(canvas, pxt) {
  2. var size = 200;
  3. pxt.save();
  4. pxt.fillStyle = "red";
  5. pxt.fillRect(-size / 2, 0, size, size);
  6. pxt.restore();
  7. }
Step 8: In this step, we create an onload function that is used to assign an id for the canvas.
Code
  1. window.onload = function() {
  2. var canvas = document.getElementById("myCanvas");
  3. var theta = 0;
  4. var d = new d();
  5. var time = d.getTime();
  6. animate(canvas, theta, time);
  7. };
Step 9: The demonstration 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: 0px;
  8. padding: 0px;
  9. }
  10. #myCanvas
  11. {
  12. border: 1px solid #00ff99;
  13. background-color:Green;
  14. }
  15. </style>
  16. window.requestAnimFrame = (function (callback)
  17. {
  18. return window.requestAnimationFrame ||
  19. window.webkitRequestAnimationFrame ||
  20. window.mozRequestAnimationFrame ||
  21. window.oRequestAnimationFrame ||
  22. window.msRequestAnimationFrame ||
  23. function (callback) {
  24. window.setTimeout(callback, 1000 / 60);
  25. };
  26. })();
  27. function drawWeight(canvas, pxt)
  28. {
  29. var size = 200;
  30. pxt.save();
  31. pxt.fillStyle = "red";
  32. pxt.fillRect(-size / 2, 0, size, size);
  33. pxt.restore();
  34. }
  35. pxt.save();
  36. pxt.translate(canvas.width / 2, 0);
  37. pxt.save();
  38. pxt.scale(1, scale);
  39. drawSpring(canvas, pxt);
  40. pxt.restore();
  41. pxt.lineWidth = 6;
  42. pxt.strokeStyle = "#ff0066"; // blue-ish color
  43. pxt.stroke();
  44. pxt.translate(0, 200 * scale);
  45. drawWeight(canvas, pxt);
  46. pxt.restore();
  47. wndow.onload = function ()
  48. {
  49. var canvas = document.getElementById("myCanvas");
  50. var theta = 0;
  51. var d = new d();
  52. var time = d.getTime();
  53. animate(canvas, theta, time);
  54. };
  55. };
  56. </script>
  57. </head>
  58. <body onmousedown="return false;" bgcolor="#ff99cc">
  59. <canvas id="myCanvas" width="578" height="500">
  60. </canvas>
  61. </body>
  62. </html>
Step 10: Press Ctrl+ F5 to run code in a browser.
Output
55.gif
56.gif
58.gif
Resources
Here are some useful resources: