Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

244
Visualizações
El desplazamiento del mouse no es correcto en el lienzo HTML5

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

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda