HTML & CSS Help with my Canvas - mouse shift

[Asylums]

Hi,

i encounter a trouble with my Canvas, i mean : when i draw my line on it, it work, but with a shift
as exemple : if i clic on top 150 left 50.
the stroke will appear at top 100 left 0.

i can use my code on a new html / js file and it works well on "new page" as a full screen canvas.
But i want to use it in a website inside a div with the same dimension as the div

the plan is to draw on an image ( as background of .canvas-place)

can someone help me with this ?
to resume : i want my canvas to fill all my div name .canvas-place with a background and no mousse shift when i clic
thanks

PART HTML :

      <div class="main-left">
        <h2>PLACEMENT</h2>
        <div class="canvas-place">
           <canvas id="canvas"></canvas>
        </div>
       
      </div>

PART CSS :

.main-left {
  width: 60%;
  height: 60vh;
  text-align: center;

}
.main-left h2 {
  font-size: 3em;
}
.canvas-place {
  border: 2px solid lightgreen;
  border-radius: 10%;
  width: 90%;
  height: 80%;
  background:url(/picture/content/corps.webp);
  background-color: white;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-left: 60px;
 
}

PART JS :

window.addEventListener("load",()=>{
    const canvas = document.getElementById("canvas");

    const ctx = canvas.getContext("2d");
   
    canvas.height =window.innerHeight;
    canvas.width =window.innerWidth;

    let painting = false;

    function startPosition(e){
        painting = true;
        draw(e);
    }
    function finishedPosition(){
        painting = false;
        ctx.beginPath();
    }

    function draw(e){
        if (!painting) return;
        ctx.lineWidth=5;
        ctx.lineCap ="round";
        ctx.lineTo(e.clientX,e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX,e.clientY);
    }

    canvas.addEventListener("mousedown",startPosition);
    canvas.addEventListener("mouseup",finishedPosition);
    canvas.addEventListener("mousemove",draw);

});