Tengo un lienzo en mi formulario de consentimiento donde los usuarios firmarán y los datos se guardarán como datos base64.

El único problema es que el lienzo respeta el relleno de los controles que lo rodean, por lo que la esquina superior izquierda de mi lienzo ya no es la esquina superior izquierda:

 <div class="p-3"> <div class="card"> <div class="card-body"> <form method="post"> <canvas width="400" height="400" id="can"></canvas> </form> </div> </div> </div>

Habría hecho un fragmento, pero soy demasiado estúpido para agregar arranque a la maldita cosa.

En este ejemplo, la clase p-3 agrega relleno, la div de la card agrega relleno y el card-body también podría funcionar.

El resultado es que ahora estoy dibujando al menos un par de píxeles por debajo ya la derecha de donde está realmente el cursor.

En la imagen aquí, el cursor está exactamente en el extremo derecho de la línea dibujada.

¿Cómo ajusto esto al dibujar la línea?

Al dibujar, JS usa la altura y el ancho del cliente para colocar los puntos contra los desplazamientos del lienzo ... al menos eso es lo que entiendo de todos modos (nunca antes había trabajado con el lienzo).

 prevX = currX; prevY = currY; currX = e.clientX - canvas.offsetLeft; currY = e.clientY - canvas.offsetTop; draw();

Dado que el cliente no está cambiando, asumo que el relleno se agrega a las compensaciones... pero no sé qué hacer al respecto.

CUALQUIER ayuda es apreciada.