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 = "#00FFFF";
  ctx.lineWidth = 4;
  ctx.strokeRect(bx, by, bw, bh);
  // 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()
}

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

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