<!DOCTYPE html>
<html>
<head>
    <title>Circular Track Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #trackCanvas {
            background-color: #fff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="trackCanvas" width="600" height="600"></canvas>
    
    <script>
        var canvas = document.getElementById('trackCanvas');
        var ctx = canvas.getContext('2d');

        // Center of the canvas
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        // Radius of the track
        var radius = 200;

        // Initial angles for the cars (in radians)
        var angle1 = 0;
        var angle2 = 0;

        // Angular speeds (convert degrees per second to radians per second)
        var speed1 = (30 * Math.PI) / 180; // 30 degrees per second
        var speed2 = (45 * Math.PI) / 180; // 45 degrees per second

        // Timestamp of the last frame
        var lastTime = null;

        // Draw the scene
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw the track
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // Calculate positions of the cars
            var x1 = centerX + radius * Math.cos(angle1);
            var y1 = centerY + radius * Math.sin(angle1);
            var x2 = centerX + radius * Math.cos(angle2);
            var y2 = centerY + radius * Math.sin(angle2);
            
            // Draw car1
            ctx.beginPath();
            ctx.arc(x1, y1, 10, 0, 2 * Math.PI);
            ctx.fillStyle = 'red';
            ctx.fill();
            ctx.strokeStyle = '#000';
            ctx.stroke();
            
            // Draw car2
            ctx.beginPath();
            ctx.arc(x2, y2, 10, 0, 2 * Math.PI);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.strokeStyle = '#000';
            ctx.stroke();
        }

        // Animation loop
        function animate(time) {
            if (lastTime != null) {
                // Time difference in seconds
                var deltaTime = (time - lastTime) / 1000;
                
                // Update the angles
                angle1 += speed1 * deltaTime;
                angle2 += speed2 * deltaTime;
                
                // Normalize the angles
                angle1 %= 2 * Math.PI;
                angle2 %= 2 * Math.PI;
                
                // Redraw the scene
                draw();
            }
            lastTime = time;
            // Request the next frame
            requestAnimationFrame(animate);
        }

        // Start the animation
        requestAnimationFrame(animate);
    </script>
</body>
</html> add "https://img.freepik.com/premium-psd/2d-green-sports-car-top-view_998359-126.jpg" for car 1, "https://img.freepik.com/premium-psd/2d-yellow-car-top-view_998359-198.jpg" for car 2