title: I want to move an arrow in javascript with mouse move
body: <p>Arrow move just fine. But the problem is when I change position of canvas in CSS, or include other elements in HTML it does not move properly. The arrow should point to where mouse pointer is. In this snippet it is working correctly after including HTML elements or applying CSS it does not moves to where mouse points.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cv = document.createElement('canvas');
  var ctx = cv.getContext('2d');
  cv.width = 1224;
  cv.height = 768;
  document.body.appendChild(cv);
  
  var centerX = 600, centerY = 100;
  
  var arrow = new Image();
  arrow.onload = function() {
      drawArrow(0);
  };
  arrow.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/35-200.png';
  
  // NB: rotations go clockwise, and the Y axis goes down
  function drawArrow(angle) {
    ctx.clearRect(0, 0, cv.width, cv.height);
      ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(-Math.PI / 2);   // correction for image starting position
    ctx.rotate(angle);
      ctx.drawImage(arrow, -arrow.width / 2, -arrow.height / 2);
    ctx.restore();
  }
  
  document.onmousemove = function(e) {
    var dx = e.pageX - centerX;
    var dy = e.pageY - centerY;
    var theta = Math.atan2(dy, dx);
      drawArrow(theta);
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-sizing: border-box;
  }
  .main{ 
    margin-top: 18%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;  
  }
  .work{ 
    margin-left: 20%;
   margin-right: -18%;
   text-transform: uppercase;
   margin-top:-1.5%;
   font-size: 2.5rem;
  }
  .about{ 
    margin-left: -18%;
    margin-right: 20%;
    text-transform: uppercase;
    margin-top:-1.5%;
   
   font-size: 2.5rem;
   }
  canvas{
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="main"&gt;
          &lt;h1 class="about"&gt;About&lt;/h1&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>