Preview:
<!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>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter