title: Moving image in a circular path purely using JavaScript
body: <p>How can I make the imageObject to move in a circular path? Or more specific, what are the mathematical formulas needed to make it do so?</p>
  
  <p>I am required to use setInterval with a function that caluclates the new coordinates of the picture. setInterval is supposed to call the function at least 20 times a second.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Graphics and animation using HTML5 Canvas&lt;/title&gt;
          &lt;style&gt;
              #the-canvas { border: 1px dashed gray }   
          &lt;/style&gt;
          &lt;script&gt;
              addEventListener('load', function() {
                  var x = document.getElementById("the-canvas");
                  var y = x.getContext("2d"); 
  
                  var imageObject = new Image();
  
                  imageObject.onload = function() {
                      y.drawImage(imageObject, 100, 200);
                  };
  
                  imageObject.src = "image.jpg";
  
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas id="the-canvas" width="500" height="400"&gt;   
              Your browser does not support the &amp;lt;canvas&amp;gt; element.
          &lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>