Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', (e) => {
            let canvas = document.querySelector('canvas');
            let ctx = canvas.getContext('2d');

            let x, y;

            canvas.addEventListener('mousedown', (e) => {
                ctx.beginPath();
                x = e.offsetX;
                y = e.offsetY;
                ctx.moveTo(x, y);
                canvas.addEventListener('mousemove', draw);
            });

            canvas.addEventListener('mouseup', (e) => {
                canvas.removeEventListener('mousemove', draw);
                ctx.closePath();
            });

            function draw(evt){
                x = evt.offsetX;
                y = evt.offsetY;
                ctx.lineTo(x, y);
                ctx.stroke();
            }
        });
    </script>
    <style>
        canvas{
            border:solid 2px black;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="1000"></canvas>
</body>
</html>