ブログでHTML5 Canvas テキスト

テキストの描画
テキストを描くこともできます。

<canvas id="drawTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawTextCanvas");
        var context = canvas.getContext("2d");
        context.fillText("Hello world!", 20, 30);
    })();
</script>

context.fillText(text, x, y, maxWidth);

textはキャンバスに描かれるテキストです。
xはテキストが描かれはじめるx座標です。
yはテキストが描かれはじめるy座標です。
maxWidthはテキストのピクセル数の最大横幅です。これはオプションです。

---

フォント
フォントを変更することもできます。

<canvas id="drawFontChangedTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawFontChangedTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        context.fillText("Hello world!", 20, 30);
    })();
</script>

context.fontプロパティは、フォントを設定します。

---

テキストの横幅
テキストの横幅を測ることができます。

<canvas id="drawMeasuredTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawMeasuredTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        var text = "Hello World!";
        var size = context.measureText(text);
        context.fillRect(0, 0, size.width, 30);
        context.fillStyle = "rgb(0, 255, 255)";
        context.fillText(text, 0, 30);
    })();
</script>

context.measureText(text).widthは、テキストの横幅を表します。