My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimensions, the 'Hello World' div is simply there for testing purposes.
HTML
<div class="row justify-content-center">
<div class="col-10">
<div class="card">
<div class="card-body">
<div class="row justify-content-center">
<div class="col-8 text-center">
<div class="bg-gradient-danger w-100">Hello World</div>
<br>
<div id="canvasBox"
style="padding: 5px; margin-bottom: 5px;border: 4px solid navy;">
<canvas id="canvas" width="1" height="1"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
let canvas = document.getElementById('canvas');
let parent = document.getElementById('canvasBox');
let imgUrl = document.getElementById('canvasIMG');
let ctx = canvas.getContext('2d');
let wdt = parent.clientWidth - parseInt(parent.style.paddingLeft) - parseInt(parent.style.paddingRight);
let ht = parent.clientHeight - parseInt(parent.style.paddingTop) - parseInt(parent.style.paddingBottom);
console.log(wdt, ht)
canvas.setAttribute('width', wdt + "px");
canvas.setAttribute('height', ht + "px");
console.log(canvas.width, canvas.height)
ctx.drawImage(imgUrl, 0, 0);
ctx.fillRect(0, 0, canvas.width, canvas.height);
As shown in the screenshot below, the canvas continues to overflow despite efforts to resize it properly.