title: HTML Canvas arc drawing on wrong position JavaScript
body: <pre><code>    function Shooter(shooter)
  {
      shooter.parent.style.width = "300px";
      shooter.parent.style.height = "200px";
      shooter.parent.style.border = "1px solid";
      shooter.parent.style.border.borderColor = shooter.borderColor;
  
  
      var canvas = document.createElement("canvas");
  
      canvas.style.width = "300px";
      canvas.style.height = "200px";
  
      canvas.addEventListener('mousedown', drawBullet, false);    
  
      shooter.parent.appendChild(canvas);
  }
  
  function drawBullet(event){
      var rect = this.getBoundingClientRect();
  
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;
  
      var ctx = this.getContext("2d");
  
      console.log(this);
      console.log(x,y);
      console.log(event.clientX, event.clientY);
  
      ctx.fillStyle = "#ff2626"; // Red color
      ctx.beginPath();
      ctx.arc(x, y, 5, 0, Math.PI * 2);
      ctx.fill();
  }
  </code></pre>
  
  <p>Trying to draw an arc at mouse position after creating the canvas dynamically, <em>for example</em>: 
  pressing on the bottom right of the canvas gives me the correct position but doesn't draw arc where pressed, pressing on the middle will draw arc away from the mouse position. checked for solutions and tried different widths and heights, if the canvas size is 250x100 it almost draws the correct arcs positions.</p>
  
  <ul>
  <li>The HTML code contains the script and only a body with a class.</li>
  </ul>