Desenhando com o Mouse - JavaScript

Anteriormente, discutimos principalmente gráficos estáticos no canvas. No entanto, também podemos criar formas dinamicamente, desenhando com o ponteiro do mouse.

Para isso, vamos definir a seguinte página:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    </head>
    <body>
    <canvas
        id="canvas"
        width="400"
        height="250"
        style="background-color: #eee; border: 1px solid #ccc; margin: 10px"
    ></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

        const w = canvas.width;
        const h = canvas.height;

        const mouse = { x: 0, y: 0 }; // coordenadas do mouse
        let draw = false;

        // Evento de pressionar o mouse
        canvas.addEventListener('mousedown', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
        draw = true;
        context.beginPath();
        context.moveTo(mouse.x, mouse.y);
        });
        // Evento de mover o mouse
        canvas.addEventListener('mousemove', function (e) {
        if (draw) {
            mouse.x = e.pageX - this.offsetLeft;
            mouse.y = e.pageY - this.offsetTop;
            context.lineTo(mouse.x, mouse.y);
            context.stroke();
        }
        });

        // Evento de soltar o mouse
        canvas.addEventListener('mouseup', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
        context.lineTo(mouse.x, mouse.y);
        context.stroke();
        context.closePath();
        draw = false;
        });
    </script>
    </body>
</html>

Para processar o movimento do mouse no elemento canvas, foram definidos três manipuladores de eventos: para pressionar, mover e soltar o mouse. Quando o mouse é pressionado, a variável draw é definida como true, iniciando o desenho. Além disso, ao pressionar, fixamos o ponto inicial de onde o desenho começará.

Ao mover o mouse, obtemos a nova posição do ponteiro e desenhamos uma linha até ela. Quando o ponteiro é solto, fechamos o caminho gráfico com o método context.closePath() e redefinimos a variável draw para false.

Desenhando com o Mouse no Canvas em JavaScript