title: Drawing a circle in a canvas on mouseclick
body: <p>I want to draw a filled (or not filled) circle in a canvas on mouseclick, but I can't get my code to work properly, I've tried pretty much everything!</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="images"&gt;&lt;/div&gt;
  &lt;canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>and my current script:</p>
  
  <pre><code>var canvas = document.getElementById("imgCanvas");
  var context = canvas.getContext("2d");
  
  function createImageOnCanvas(imageId) {
      canvas.style.display = "block";
      document.getElementById("images").style.overflowY = "hidden";
      var img = new Image(300, 300);
      img.src = document.getElementById(imageId).src;
      context.drawImage(img, (0), (0)); //onload....
  }
  
  function draw(e) {
      var pos = getMousePos(canvas, e);
      posx = pos.x;
      posy = pos.y;
      context.fillStyle = "#000000";
      context.arc(posx, posy, 50, 0, 2 * Math.PI);
  }
  
  function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
      };
  }
  </code></pre>
  
  <p>I think my problem is with <code>function draw(e)</code>, even though I feel pretty confident about that part.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/ds9s7/158/" rel="nofollow"><strong>jsFiddle</strong></a></p>