Estoy usando html canvas en mi proyecto de bloc de dibujo y cuando trato de dibujar en el lienzo, mi línea se forma en otras coordenadas dentro del lienzo diferentes de las coordenadas del puntero de mi mouse. Según mi conjetura, este error tiene algo que ver con la posición, el ancho o la altura de mi lienzo porque en la esquina superior izquierda, la línea y el puntero están en las mismas coordenadas. Acabo de empezar a usar js, ¿alguien puede ayudarme a resolver este problema?

aquí está mi código js

 pencil.onclick = function(){ console.log('pencil clicked'); function pencil_draw(){ console.log('pencil selected'); var isDrawing = false; var x = 0; var y = 0; canvas.addEventListener('mousedown',e=>{ console.log('mousedown activated'); x = e.offsetX; y = e.offsetY; isDrawing = true; }); canvas.addEventListener('mousemove',e=>{ if(isDrawing == true){ console.log('mousemove activated'); drawline(context,x,y,e.offsetX,e.offsetY); x = e.offsetX; y = e.offsetY; } }); canvas.addEventListener('mouseup',e=>{ if(isDrawing == true){ console.log('mouseup activated'); drawline(context,x,y,e.offsetX,e.offsetY); x=0; y=0; isDrawing = false; } }) function drawline(context,x,y,x1,y1){ context.beginPath(); context.strokeStyle = "black"; context.lineWidth = "2"; context.moveTo(x, y); context.lineTo(x1, y1); context.stroke(); context.closePath(); } } pencil_draw(); }

aquí está mi css para el lienzo

 .canvasbox #canvas{ width:500px; height:500px; }

HTML de lienzo

 <section class="canvasbox"> <canvas id="canvas"></canvas> </section>

aquí está el enlace de mi proyecto si alguien quiere verificar el código completo, es muy temprano, por lo que no hay consultas de medios en él https://github.com/sharmaachintya08/sketchpad/tree/calibrate