Bbox calculation

Try de calculate bbox coordinate after scaling transformation

by niemes

HTML

<style>
body{
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas{
  width: 100vw;
  height: 100vh
}
</style>
<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext("2d");

//bbox  
let [bx, by, bw, bh] = [146, 58, 82, 87]

console.log(bx, by, bw, bh)

function bboxDraw(){
	// Draw the bounding box.
  ctx.strokeStyle = "red";
  ctx.lineWidth = 4;
  ctx.strokeRect(bx, by, bw, bh);
  // Draw the label background.
  ctx.fillStyle = "#00FFFF";
}

function bboxRatioDraw(img) {
	 // Use percent to correctly adapt the coordinate to the scaled image
   let percentBx = (100 * (bx / img.naturalWidth)), // x %
   		 percentBy = (100 * (by / img.naturalHeight)), // y %
   		 percentBw = (bw * 100) / img.naturalWidth, // width%
       percentBh = (bh * 100) / img.naturalHeight; // height%
  
  // then map the values to the current canvas
  
   let finalBx = (percentBx * canvas.width) / 100, // x en pixel
       finalBy = (percentBy * canvas.height) / 100, // y en pixel

       finalBw = (percentBw * canvas.width) / 100, // width en pixel
       finalBh = (percentBh * canvas.height) / 100; // height en pixel
                    
	// Draw the bounding box.
  ctx.strokeStyle = "green";
  ctx.lineWidth = 4;
  ctx.strokeRect(finalBx, finalBy, finalBw, finalBh);
  // Draw the label background.
  ctx.fillStyle = "#00FFFF";
}

function scaleToFill(img){
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;

    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
    bboxDraw()
    bboxRatioDraw(img)
}

let img =  new Image()
try {
    img.src = "https://via.placeholder.com/1280x720"
} catch (error) {
    console.log("image URL", error);
}

img.onload = function() {
   scaleToFill(this)
}