title: How to make the circle disappear when clicked (JavaScript | canvas)
body: <p>my problem at the moment is that the circle does not appear at all when the page is loaded. It only appears when clicked on the place where the circle is and disappears when clicked somewhere outside. (link to the fiddle below)</p>
  
  <p>I used 'mousedown' event in 'addEventListener' method. 
  Variable 'distance' stands for the distance between the coordinates of cursor and the circle center.</p>
  
  <pre><code>canvas.addEventListener('mousedown', function(evt) {
  
      mousePos = getMousePos(canvas, evt);
      var distance = Math.sqrt( Math.pow((mousePos.x - 100), 2) + Math.pow((mousePos.y - 300), 2) ) ;
  
      if (distance &lt;= 50 &amp;&amp; distance &gt;= 0) {
          console.log('clicked on the circle');
      }
  
  }, false);   
  </code></pre>
  
  <p>The result of the script should go like this:</p>
  
  <ol>
  <li>page is loaded </li>
  <li>circle is visible on the left side</li>
  <li>clicked on the circle and it dissapears</li>
  </ol>
  
  <p>Here's fiddle:
  <a href="http://jsfiddle.net/K7um6/" rel="nofollow">fiddle</a>
  (click at 'mouse position = 100; 300'[more or less] to see the circle)</p>
  
  <p>Thanks in advance!!</p>