canvas

PHOTO

Fri Nov 01 2024 13:55:57 GMT+0000 (Coordinated Universal Time)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Canvas Drawing App</title>
        <style>
            canvas { border: 1px solid black; }
        </style>
    </head>
    <body>
        <h2>Drawing App</h2>
        <canvas id="drawCanvas" width="400" height="400"></canvas>
        <script>
            const canvas = document.getElementById("drawCanvas");
            const ctx = canvas.getContext("2d");
            let drawing = false;
            canvas.addEventListener("mousedown", () => drawing = true);
            canvas.addEventListener("mouseup", () => drawing = false);
            canvas.addEventListener("mousemove", draw);
            function draw(event) {
                if (!drawing) return;
                ctx.lineWidth = 2;
                ctx.lineCap = "round";
                ctx.strokeStyle = "black";
                ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
            }
        </script>
    </body>
    </html>

COPY