17. Delayed Circle Drawing Using JavaScript.

    <!DOCTYPE html>
    <html lang="en">
        
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas Circle Drawer</title>
        <style>
            #myCanvas {
                border: 1px solid #d3d3d3;
            }
        </style>
    </head>
        
    <body>
        <h3>Draw a Circle on Canvas</h3>
        <button onclick="startDrawing()">Draw Circle After 3 Seconds</button>
        
        <canvas id="myCanvas" width="300" height="150">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        
        <script>
            function startDrawing() {
                // Provide user feedback
                alert('Drawing will start in 3 seconds...');
                
                // Set timeout to draw the circle after 3 seconds (3000 ms)
                setTimeout(drawCircle, 3000);
            }
        
            function drawCircle() {
                // Get the canvas element and context
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
        
                // Clear the canvas before drawing (in case it has existing content)
                ctx.clearRect(0, 0, canvas.width, canvas.height);
        
                // Set styles for the circle
                ctx.lineWidth = 3;
                ctx.strokeStyle = 'blue';
        
                // Begin drawing the circle
                ctx.beginPath();
                ctx.arc(150, 75, 50, 0, 2 * Math.PI);
                ctx.stroke();
        
                // Display an alert once the circle is drawn
                alert('Circle drawn!');
            }
        </script>
    </body>
        
    </html>

Output

        No Output Available