title: draw a circle over a image in html5 and javascript
body: <p>html code :</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function start() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
  
      var image = new Image();
  
      image.onload = function () {
          ctx.drawImage(image, 69, 50);
          //draw a circle
          ctx.beginPath();
          ctx.arc(100, 75, 10, 0, Math.PI * 2, true);
          ctx.stroke();
       };
  
      image.src = 'xy-coordinates.jpg';                 
    }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;img id="myImgId" alt="" src="xy-coordinates.jpg" /&gt;
  &lt;input type="button" value="submit" onclick="start()"&gt; 
  &lt;canvas id="myCanvas" width="700" height="393"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm trying to draw a circle on an image dynamically once I click the button. </p>
  
  <p>The problem is after clicking the button, I'm getting an extra image (with the circle drawn) displayed on the screen rather drawing on original image. </p>
  
  <p>My requirement is to draw a circle on an image which is already displayed.</p>
  
  <p>UPDATED </p>
  
  <pre><code>&lt;script&gt;
  
  function Draw(){
  var img = document.getElementById("theImg");
  var cnvs = document.getElementById("myCanvas");
  
  cnvs.style.position = "absolute";
  cnvs.style.left = img.offsetLeft + "px";
  cnvs.style.top = img.offsetTop + "px";
  
  var ctx = cnvs.getContext("2d");
  ctx.beginPath();
  ctx.arc(250, 210, 10, 0, 2 * Math.PI, false);
  ctx.lineWidth = 3;
  ctx.stroke();
  }
  
  
  &lt;/script&gt;
  
  &lt;img id='theImg' src='xy-coordinates.jpg'&gt;
  &lt;input type='button' value='Draw' onclick='draw()' &gt;&lt;br&gt;
  &lt;canvas id='myCanvas' width="700" height="393"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>when &lt; br &gt; is used in html tag befor or after canvas there comes a huge distance betweein image and button r any tags i place in there. how to rectify it ?</p>