Create a text inside circles in HTML5 Canvas

To create text inside circles in HTML5 Canvas, you need to draw a circle first using context.arc(), then add text at the center using context.fillText(). This technique is useful for creating badges, labels, or interactive elements.

Basic Approach

The process involves three main steps:

1. Draw a circle using beginPath() and arc()
2. Fill the circle with a background color
3. Add centered text with contrasting color

Example: Static Circle with Text

<canvas id="canvas1" width="400" height="200" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');

// Draw circle
context.beginPath();
context.fillStyle = "blue";
context.arc(100, 100, 30, 0, 2 * Math.PI, false);
context.fill();

// Add text
context.font = '14px Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('Hello', 100, 100);
</script>

Interactive Example: Click to Create Circles

<div id="demo">
    <canvas id="canvas2" width="400" height="300" style="border:1px solid #000;"></canvas>
</div>

<script>
document.getElementById("canvas2").addEventListener("click", function(event) {
    var canvas = document.getElementById('canvas2');
    if (canvas.getContext) {
        var context = canvas.getContext("2d");
        var radius = 25;
        
        // Get click coordinates relative to canvas
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;

        // Draw circle
        context.beginPath();
        context.fillStyle = "blue";
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fill();

        // Add text
        context.font = '12px Arial';
        context.fillStyle = 'white';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillText('Click', x, y);
    }
});
</script>

Key Points

• textAlign: 'center' - Centers text horizontally
• textBaseline: 'middle' - Centers text vertically
• Contrasting colors - Use white text on dark circles for readability
• Font size - Adjust based on circle radius for proper fit

Multiple Circles Example

<canvas id="canvas3" width="400" height="200" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById('canvas3');
var context = canvas.getContext('2d');

var circles = [
    {x: 80, y: 100, text: 'A', color: 'red'},
    {x: 160, y: 100, text: 'B', color: 'green'},
    {x: 240, y: 100, text: 'C', color: 'purple'},
    {x: 320, y: 100, text: 'D', color: 'orange'}
];

circles.forEach(function(circle) {
    // Draw circle
    context.beginPath();
    context.fillStyle = circle.color;
    context.arc(circle.x, circle.y, 30, 0, 2 * Math.PI, false);
    context.fill();
    
    // Add text
    context.font = '16px Arial';
    context.fillStyle = 'white';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText(circle.text, circle.x, circle.y);
});
</script>

Conclusion

Creating text inside circles requires drawing the circle first, then positioning text at its center using proper alignment properties. Use textAlign: 'center' and textBaseline: 'middle' for perfect centering.