title: How to make an user create a circle when clicking the canvas
body: <p>I am new to programming, and to the canvas element.
  I want to create a blackhole simulation (using basic physics concepts) and I was wondering how can I add interactivity to it.Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
      var canvas = document.getElementById("space"),
      ctx = canvas.getContext('2d'),
      G = 6.67e-11, //gravitational constant 
      c = 3e8, //speed of light (m/s)
      M = 12e31, // masseof the blackhole in kg (60 solar masses)  
      Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
      pixel_Rs = Rs / 1e3,
      xb = canvas.width / 2, // x coordinate of the blackhole
      yb = canvas.height / 2,// y coordinate of the blackhole
      x = 400,
      y = yb,
      R = 6e3,
       // every pixel variable is a scaled distance           
      distance = (xb - x) * 1e4,
      pixel_distance = distance / 1e3,
      pixel_R = R / 1e3,
      vorbital = Math.sqrt((G * M) / distance),
      perimeter = 2 * Math.PI * distance,
      tcircle = perimeter / vorbital,
      dmsec = 1 / (tcircle / 10e-3),
      dradian = dmsec * 2 * Math.PI;
  
      setInterval(function () {
  
          ctx.fillStyle = "#032240";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "black";
          ctx.beginPath();
          ctx.arc(xb, yb, pixel_Rs, 0, 2 * Math.PI, false);
          ctx.closePath();
          ctx.fill();
          ctx.fillStyle = "grey";
          ctx.beginPath();
          ctx.arc(x, y, pixel_R, 0, 2 * Math.PI, false);
          ctx.closePath();
          ctx.fill();
  
          ctx.save();
          ctx.translate(xb, yb);
          ctx.rotate(-dradian);
          ctx.translate(-xb, -yb);
      }, 20)
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="space" width="1400" height="850"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now what I want to do is to make the circle that rotates appear and rotate when the user clicks on the canvas, so the coordinates of the mouse click are the ones given by the user, instead of giving it arbitrary coordinates. if you could help me, it'd be great. if you could also tell me how to make the circle disappear if the user clicks on the circle that represent the blackhole would be awesome.
  Thanks a lot</p>
  
  <p>Ps: Nevermind the calculations.</p>