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</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas'); | |
| const context = canvas.getContext('2d'); | |
| const versionText = 'v1.0.0'; | |
| 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.0125; // 1.25% of the smaller dimension | |
| context.beginPath(); | |
| context.arc(centerX, centerY, radius, 0, 2 * Math.PI); | |
| context.strokeStyle = 'white'; | |
| context.lineWidth = 0.25 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.25em 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 draw() { | |
| initializeCanvas(); | |
| drawWhiteCircle(); | |
| drawVersionText(); | |
| } | |
| draw(); | |
| window.addEventListener('resize', draw); | |
| </script> | |
| </body> | |
| </html> | |