<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Drawing Tool - Step 1</title>
    <style>
        /* Center the canvas on the page */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f3f3f3; /* Light gray background for contrast */
        }

/* Style the canvas element */
        canvas {
            border: 1px solid #000; /* Add a black border around the canvas */
            background-color: #fff; /* Set canvas background to white */
            cursor: crosshair; /* Use a crosshair cursor for better drawing precision */
        }
    </style>
</head>
<body>
    
    <canvas id="drawingCanvas" width="800" height="600"></canvas>

// Get the 2D rendering context for drawing
        const ctx = canvas.getContext("2d");

// Variable to track whether the user is currently drawing
        let isDrawing = false;

// Variables to store the last mouse coordinates
        let lastX = 0;
        let lastY = 0;

// Event listener for when the user presses the mouse button down
        canvas.addEventListener("mousedown", (e) => {
            isDrawing = true; // Start drawing
            [lastX, lastY] = [e.offsetX, e.offsetY]; // Save the starting point
        });

// Event listener for when the mouse moves over the canvas
        canvas.addEventListener("mousemove", (e) => {
            if (!isDrawing) return; // Exit if the mouse button is not pressed

// Begin a new path
            ctx.beginPath();

// Move to the last saved position
            ctx.moveTo(lastX, lastY);

// Draw a line to the current mouse position
            ctx.lineTo(e.offsetX, e.offsetY);

// Set the line color and width
            ctx.strokeStyle = "black"; // Set line color to black
            ctx.lineWidth = 2; // Set line width to 2 pixels

// Apply the stroke to the canvas
            ctx.stroke();

// Update the last mouse position
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });

// Event listener for when the mouse button is released
        canvas.addEventListener("mouseup", () => isDrawing = false);

// Event listener for when the mouse leaves the canvas
        canvas.addEventListener("mouseout", () => isDrawing = false);
    </script>
</body>
</html>

About THIS CODE (CANVASOR.NET):