title: Scrolling issue with Canvas style.left/top
body: <p>I am making a magnifying glass for a canvas application but ive run into an issue with scrolling.
  Essentially the goal is to take a canvas and when an image is added (in this case a cgm image) and make a snapshot of it, scale it up and draw it on to a second smaller canvas that overlays it and follow the mouse (preferably a drag/mousedown and up, but i am using mousemove for testing purposes). I believe the issue is in the zoom.style.top &amp; zoom.style.left NOTE on my main aplication I have a top margin of 70px so keep that in mind.</p>
  <p>here is a quick example I wrote up</p>
  <pre><code>&lt;!-- language: lang-js --&gt;
  
  var canvas = document.getElementById(&quot;canvas1&quot;);
  var ctx = canvas.getContext(&quot;2d&quot;);
  var ox = canvas.width / 2;
  var oy = canvas.height / 2;
  ctx.font = &quot;42px serif&quot;;
  ctx.textAlign = &quot;center&quot;;
  ctx.textBaseline = &quot;middle&quot;;
  ctx.fillStyle = &quot;blue&quot;;
  ctx.fillRect(ox / 2, oy / 2, ox, oy);
  function magnify() {
    var main = document.getElementById(&quot;canvas1&quot;);
    var ctx = main.getContext('2d')
    var base64 = main.toDataURL('image/png', 0);
    drawing = new Image();
    drawing.onload = () =&gt; {
      var zoom = document.getElementById(&quot;tCanvas&quot;);
      var zoomCtx = zoom.getContext('2d');
      zoomCtx.drawImage(drawing, 0, 0);
    }
    main.addEventListener(&quot;mousemove&quot;, function(e) {
      var zoom = document.getElementById(&quot;tCanvas&quot;);
      var zoomCtx = zoom.getContext('2d');
  
      zoomCtx.clearRect(0, 0, zoom.width, zoom.height);
  
      zoomCtx.drawImage(main, e.x, e.y, 200, 200, 0, 0, 300, 300);
      zoom.style.top = e.pageY - 70 + &quot;px&quot;
      zoom.style.left = e.pageX - 10 + &quot;px&quot;
      e.pageY = -150
      e.pageX = -150
      zoom.style.display = &quot;block&quot;;
    });
  
    main.addEventListener(&quot;mouseleave&quot;, function() {
      var zoom = document.getElementById(&quot;tCanvas&quot;);
      zoom.style.display = &quot;none&quot;;
    });
    drawing.src = base64;
  };
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id=&quot;tCanvas&quot; class=&quot;cgm&quot; height=&quot;100&quot; width=&quot;100&quot; style=&quot;background-color:white;  position: absolute; display: none; z- 
        index:1;border:1px solid red;&quot;&gt;  &lt;/canvas&gt;
  &lt;canvas tabindex=1 class=&quot;cgm&quot; id=&quot;canvas1&quot; style=&quot;position:relative;  background:white; 
        left:0;right:0;margin:auto;z-index:1;margin-top:70px;  &quot;&gt;&lt;/canvas&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;button id=&quot;zoom&quot; onclick=&quot;magnify();&quot;&gt;Zoom&lt;/button&gt;
  </code></pre>
  
  <p>Here's a fiddle for reference (I fixed the height to display the scroll issue).</p>
  <p><a href="https://jsfiddle.net/qLf0nxkz/" rel="nofollow noreferrer">JSFiddle</a></p>