Skip to content

Instantly share code, notes, and snippets.

@parzibyte
Created Sep 9, 2021
Embed
What would you like to do?
// Lo demás tiene que ver con pintar sobre el canvas en los eventos del mouse
$canvas.addEventListener("mousedown", evento => {
// En este evento solo se ha iniciado el clic, así que dibujamos un punto
xAnterior = xActual;
yAnterior = yActual;
xActual = obtenerXReal(evento.clientX);
yActual = obtenerYReal(evento.clientY);
contexto.beginPath();
contexto.fillStyle = COLOR_PINCEL;
contexto.fillRect(xActual, yActual, GROSOR, GROSOR);
contexto.closePath();
// Y establecemos la bandera
haComenzadoDibujo = true;
});
$canvas.addEventListener("mousemove", (evento) => {
if (!haComenzadoDibujo) {
return;
}
// El mouse se está moviendo y el usuario está presionando el botón, así que dibujamos todo
xAnterior = xActual;
yAnterior = yActual;
xActual = obtenerXReal(evento.clientX);
yActual = obtenerYReal(evento.clientY);
contexto.beginPath();
contexto.moveTo(xAnterior, yAnterior);
contexto.lineTo(xActual, yActual);
contexto.strokeStyle = COLOR_PINCEL;
contexto.lineWidth = GROSOR;
contexto.stroke();
contexto.closePath();
});
["mouseup", "mouseout"].forEach(nombreDeEvento => {
$canvas.addEventListener(nombreDeEvento, () => {
haComenzadoDibujo = false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment