Herkese Merhaba canvas'ın boyutunu 100% kaplıyıcak şekilde yaptığımda bir sıkıntı vs olmuyor ama ben card içerisinde col-lg-9 şeklinde kullanmak istiyorum.

böyle kullandığımda kordinatlar haliyle biraz şaşıyor ve yanlış yeri çiziyor nasıl düzeltebilirim.
<img src="https://i.resmim.net/i/2021-05-10-22-44-41.gif&quot;&gt;

var canvas = document.getElementById('draw_map');
var context = canvas.getContext('2d');
context.fillStyle="white";
context.fillRect(0,0,canvas.width,canvas.height);

var radius = 5;
var start = 0;
var end = Math.PI * 2;
var dragging = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

var putPoint = function(e){
    if(dragging){
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        context.beginPath();
        context.arc(e.offsetX, e.offsetY, radius, start, end);
        context.fill();
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);
    }
}

var engage = function(e){
    dragging = true;
    putPoint(e);
}

var disengage = function(){
    dragging = false;
    context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);