Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Minimalist White Circle with FPS</title> | |
| <style> | |
| body { | |
| margin: 0; /* Remove default margin */ | |
| overflow: hidden; /* Prevent scrollbars */ | |
| } | |
| canvas { | |
| display: block; /* Remove canvas default inline display */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas'); | |
| const context = canvas.getContext('2d'); | |
| const versionText = 'v1.0.0'; | |
| let fps = 0; | |
| let lastFrameTime = performance.now(); | |
| function initializeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| context.fillStyle = 'black'; | |
| context.fillRect(0, 0, canvas.width, canvas.height); | |
| } | |
| function drawWhiteCircle() { | |
| const centerX = canvas.width / 2; | |
| const centerY = canvas.height / 2; | |
| const radius = Math.min(canvas.width, canvas.height) * 0.00625; // 0.625% of the smaller dimension | |
| context.beginPath(); | |
| context.arc(centerX, centerY, radius, 0, 2 * Math.PI); | |
| context.strokeStyle = 'white'; | |
| context.lineWidth = 0.125 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.125em stroke | |
| context.stroke(); | |
| } | |
| function drawVersionText() { | |
| context.font = '1em Arial'; | |
| context.fillStyle = 'white'; | |
| context.textAlign = 'right'; | |
| context.textBaseline = 'bottom'; | |
| context.fillText(versionText, canvas.width - 10, canvas.height - 10); | |
| } | |
| function drawFPS() { | |
| context.font = '1em Arial'; | |
| context.fillStyle = 'white'; | |
| context.textAlign = 'left'; | |
| context.textBaseline = 'top'; | |
| context.fillText(fps.toFixed(1) + ' fps', 10, 10); | |
| } | |
| function updateFPS() { | |
| const now = performance.now(); | |
| const deltaTime = now - lastFrameTime; | |
| lastFrameTime = now; | |
| const currentFPS = 1000 / deltaTime; | |
| fps = fps + (currentFPS - fps) * 0.1; // LERP for smooth FPS updates | |
| } | |
| function draw() { | |
| initializeCanvas(); | |
| drawWhiteCircle(); | |
| drawVersionText(); | |
| drawFPS(); | |
| } | |
| function loop() { | |
| updateFPS(); | |
| draw(); | |
| requestAnimationFrame(loop); | |
| } | |
| loop(); | |
| window.addEventListener('resize', draw); | |
| </script> | |
| </body> | |
| </html> | |