title: How to transfer rectangle coordinates from one canvas to another in Html5?
body: <p>I'm using some codes to dynamically <em>transfer co-ordinates of a rectangle on canvas</em> to the <em>another canvas</em> to draw rectangle on the exact position on canvas2.</p>
  
  <p>I've gone through different similar questions and solutions like: <a href="https://stackoverflow.com/questions/20630207/transforming-coordinates-of-one-rectangle-to-another-rectangle">link1</a> and <a href="https://stackoverflow.com/questions/59245964/draw-scaled-rectangles-on-scaled-image-canvas">link2</a> on stackoverflow, but none of them is working in my case.</p>
  
  <p><strong>sendimg()</strong> function is transferring rectangle co-ordinates from canvas1 to the canvas2. As the canvas2 image is scaled to large size, rectangles are not drawing on the correct position. </p>
  
  <p>Please check the attached snippet or  <a href="https://codepen.io/JackPaul/pen/XWJLYwQ" rel="nofollow noreferrer">codepen link</a> for detail.</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 canvas = document.getElementById("canvas1");
  var canvas2 = document.getElementById("canvas2");
  
  var ctx = canvas.getContext("2d");
  var ctx2 = canvas2.getContext("2d");
  
  var img = new Image();
  var rect = {};
  var scale = 0;
  var scale2 = 0;
  var x = 0;
  var y = 0;
  var x2 = 0;
  var y2 = 0;
  var drag = false;
  
  
  img.onload = function () {
   //Setting dpi for canvas1
   var dpi = window.devicePixelRatio || 1;
   canvas.setAttribute('width', canvas.clientWidth * dpi);
   canvas.setAttribute('height', canvas.clientHeight * dpi);
   
   //Setting dpi for canvas2
   var dpi = window.devicePixelRatio || 1;
   canvas2.setAttribute('width', canvas2.clientWidth * dpi);
   canvas2.setAttribute('height', canvas2.clientHeight * dpi);
      
   
   ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
   ctx.save();
   
   ctx2.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
   ctx2.save();
   
   //fitting image to canvas fill
   scale = Math.max(canvas.clientWidth / img.width, canvas.clientHeight / img.height); //canvas1 scale
   scale2 = Math.max(canvas2.clientWidth / img.width, canvas2.clientHeight / img.height); //canvas2 scale
  
      x = (canvas.clientWidth / 2) - (img.width / 2) * scale; //canvas1 x
      y = (canvas.clientHeight / 2) - (img.height / 2) * scale; //canvas1 y
  
   x2 = (canvas2.clientWidth / 2) - (img.width / 2) * scale2; //canvas2 x
      y2 = (canvas2.clientHeight / 2) - (img.height / 2) * scale2; //canvas2 y
   
      ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
   ctx2.drawImage(img, x2, y2, img.width * scale2, img.height * scale2);
   
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
  
  }
  img.crossOrigin = "Anonymous";
  img.src = 'https://i.imgur.com/1n8sbrF.jpg';
  
  function mouseDown(e) {
      rect.startX = e.clientX - this.offsetLeft;
      rect.startY = e.clientY - this.offsetTop;
      drag = true;
  }
  
  function mouseUp() { 
   drag = false; 
   console.log(rect);
  }
  
  function mouseMove(e) {
      if (drag) {
          ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
          ctx.save();
          ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
          rect.w = (e.clientX - this.offsetLeft) - rect.startX;
          rect.h = (e.clientY - this.offsetTop) - rect.startY;
    ctx.lineWidth  = 2;
          ctx.strokeStyle = 'red';
          ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
      }
  }
  
  function sendimg()
  {
   if(rect.startX === undefined)
   {
    alert("draw any rectangle first on canvas1");
    return false;
   }
   ctx2.lineWidth = 2;
   ctx2.strokeStyle = "yellow";
   //Following code is not drawing rectangle on correct position
   ctx2.strokeRect(rect.startX * scale2 + x2 , rect.startY* scale2 + y2, rect.w * scale2 , rect.h * scale2);
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
    width: 90%;
    height: 90%;
    }
  #div1 {
    margin: 10px;
    width: 800px;
    height: 600px;
    border: 2px solid red;
  }
  
  #div2 {
    position: absolute;
    top: 20px;
    left: 900px;
    margin: 10px;
    width: 1200px;
    height: 800px;
    border: 2px solid red;
  }
  
  canvas {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" onclick="sendimg();"&gt;Send Rectangle on Canvas2&lt;/button&gt;
  &lt;div id="div1"&gt;
   &lt;canvas id="canvas1"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;div id="div2"&gt;
   &lt;canvas id="canvas2"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>