Creé una aplicación de pintura en lienzo HTML5 mediante la cual el usuario puede pintar con el mouse. Pero el problema es que hay un ligero desplazamiento del puntero del mouse cuando el usuario dibuja algo y el dibujo no está exactamente en el punto donde se hace clic con el mouse. Adjunto una parte relevante de mi código.
var canvas = document.querySelector('#board'); this.ctx = canvas.getContext('2d'); function drawOnCanvas() { var ctx = this.ctx; var sketch = document.querySelector('#sketch'); var sketch_style = getComputedStyle(sketch); // Make it visually fill the positioned parent canvas.style.width ='100%'; canvas.style.height='80%'; // ...then set the internal size to match canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; var mouse = {x: 0, y: 0}; var last_mouse = {x: 0, y: 0}; //for clearing the board document.getElementById('clr').addEventListener('click', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); }, false); /* Mouse Capturing Work */ canvas.addEventListener('mousemove', function(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); /* Drawing on Paint App */ ctx.lineWidth = 5; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = 'blue'; // setTimeout(()=>{ // ctx.strokeStyle = (writeMode===1)?'blue':'white'; //choose pen or eraser (pen is 1 and eraser is 0) // },100) canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var root = this; var onPaint = function() { ctx.beginPath(); ctx.moveTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.closePath(); ctx.stroke(); if(root.timeout != undefined) clearTimeout(root.timeout); root.timeout = setTimeout(function(){ var base64ImageData = canvas.toDataURL("image/png"); root.socket.emit("canvas-data", base64ImageData); }, 1000) }; }Alguien por favor da una idea de cómo corregir eso