// Create a canvas element and add it to the document
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

// Get the drawing context
const ctx = canvas.getContext('2d');

// Set styles for the canvas element
canvas.style.border = '1px solid black';
canvas.style.backgroundColor = 'lightgray';

// Function to draw the road
function drawRoad() {
    // Draw the road surface
    ctx.fillStyle = 'darkgray'; // Road color
    ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill entire canvas

    // Draw the lanes
    const laneWidth = 100;
    const laneCount = 3; // Number of lanes

    for (let i = 0; i < laneCount; i++) {
        ctx.fillStyle = 'lightgray'; // Lane color
        ctx.fillRect((canvas.width - (laneCount * laneWidth)) / 2 + i * laneWidth, 0, laneWidth, canvas.height);
    }

    // Draw dashed lines for lanes
    ctx.strokeStyle = 'white'; // Dashed line color
    ctx.lineWidth = 5; // Line width
    ctx.setLineDash([15, 15]); // Dashed line pattern

    for (let i = 1; i < laneCount; i++) {
        const x = (canvas.width - (laneCount * laneWidth)) / 2 + i * laneWidth;
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }

    // Reset dashed line settings
    ctx.setLineDash([]); // Solid line
}

// Draw the road when the page loads
drawRoad();