JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        function drawDial() {
            const canvas = document.getElementById('myCanvas');
            const ctx = canvas.getContext('2d');
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = 200;
            
            // Set background color to grey
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw circle
            ctx.strokeStyle = 'white';
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.stroke();
            
            // Draw numbers 1-10
            for(let i = 1; i <= 10; i++) {
                const angle = ((i - 1) * 36 - 90) * (Math.PI / 180); // -90 degrees to start from the top
                const number_x = centerX + radius * 0.53 * Math.cos(angle);
                const number_y = centerY + radius * 0.53 * Math.sin(angle);
                
                // Rotate text to face the center
                ctx.save();
                ctx.translate(number_x, number_y);
                ctx.rotate(angle + Math.PI / 2); // +Math.PI/2 to align with the closest part of the circle

                ctx.font = '42px Arial';
                ctx.fillStyle = 'white';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(i, 0, 0);

                // Restore original context state
                ctx.restore();
            }
        }
        
        drawDial();
    </script>

CSS

#myCanvas {
            background-color: grey;
        }