HTML5 Canvasで円の中にテキストを描画する方法

HTML5のCanvasで円の中にテキストを表示したい場面は多くあります。例えば、クリックした位置にラベル付きのマーカーを配置したり、図形に番号を付けたりするケースです。

円の中にテキストを描画するには、まず context.beginPath() を使って新しいパスを開始し、その後 arc() メソッドで円を描き、最後に fillText() でテキストを重ねて描画します。

基本的な手順

1. パスの開始：context.beginPath() で新しい描画パスを作成します。
2. 円の描画：context.arc(x, y, 半径, 開始角, 終了角) で円の形状を定義します。
3. 塗りつぶし：context.fill() で円を指定した色で塗ります。
4. テキストの設定：font、fillStyle、textAlign を設定します。
5. テキストの描画：context.fillText(文字列, x, y) で円の中心にテキストを配置します。

サンプルコード（JavaScript）

以下は、canvas上でクリックされた位置に青い円を描き、その中央に白いテキストを表示する例です。jQueryを使ってクリックイベントを処理しています。

$("#demo").on("click", "#canvas1", function(event) {
    var canvas = document.getElementById('canvas1');
    if (canvas.getContext) {
        var context = canvas.getContext("2d");
        var w = 25; // 円の直径
        var x = event.pageX;
        var y = Math.floor(event.pageY - $(this).offset().top);

        // 円を描画
        context.beginPath();
        context.fillStyle = "blue";
        context.arc(x, y, w/2, 0, 2 * Math.PI, false);
        context.fill();

        // テキストを描画
        context.font = '9pt Arial';
        context.fillStyle = 'white';
        context.textAlign = 'center';
        context.fillText('amit', x, y + 4);
    }
});

コードのポイント

• w / 2 を半径として渡すことで、直径25pxの円が描かれます。
• context.arc() の第5引数 false は時計回りの描画方向を指定します。
• context.textAlign = 'center' を設定することで、テキストがX座標を基準に中央揃えになります。
• Y座標に +4 を加えているのは、テキストのベースラインを調整し、円の垂直方向の中心に見せるためです。
• font プロパティにはフォントサイズだけでなくフォントファミリーも指定することをおすすめします（例：'9pt Arial'）。

HTML

canvas要素を配置するためのHTMLは以下のようになります。

<div id="demo">
    <canvas id="canvas1" width="400" height="300"></canvas>
</div>

まとめ

Canvasで円とテキストを組み合わせる際は、先に図形を描いてからテキストを重ねるのが基本です。textAlign やベースラインのオフセットを適切に調整すれば、どのようなサイズの円でもテキストを美しく中央に配置できます。ぜひ実際にコードを動かして、挙動を確認してみてください。