【JavaScript入門】文字列の描画

　Canvas 2D API では図形だけでなく テキスト もピクセル単位で自由にレンダリングできます。ブラウザが持つフォント描画エンジンを利用しつつ、座標とプロパティを組み合わせて見出し・注釈・ゲームスコアなどをダイナミックに表示できるのが魅力です。ここでは “どこに・どんなスタイルで・どう揃えるか” を決める 設定プロパティ と、実際に文字列を置く 描画メソッド を整理し、サンプルコードで挙動を確認します。

1．文字列描画の設定プロパティ

プロパティ	役割	例
font	フォントスタイル・サイズ・種類を CSS 書式でまとめて指定	"italic bold 28px 'Noto Sans JP'"
textAlign	水平方向の基準位置	start / end / left / right / center
textBaseline	垂直方向の基準線	top / hanging / middle / alphabetic / ideographic / bottom

ポイント：縦基準 (textBaseline) はフォントごとに微妙に差が出るため、デザイン最終調整時は実描画を見ながら微調整しましょう。

２．文字列描画メソッド

メソッド	役割
fillText(text, x, y[, maxWidth])	指定位置に塗りつぶし描画
strokeText(text, x, y[, maxWidth])	指定位置に輪郭線描画
measureText(text).width	現在設定で描いた場合の横幅を取得

maxWidth を使うと長い文章でも自動で縮小されるため、可変レイアウトに便利です。

３．サンプルプログラム

ファイル名： text_draw_demo.html

PNGファイルのダウンロードは、ここ「checker.png」からできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🖋️ Canvas Text Demo</title>
<style>
  body  {font-family:"Segoe UI",sans-serif;background:#eef8ff;text-align:center;margin:2rem}
  h1    {font-size:1.8rem;margin-bottom:1rem}
  canvas{border:1px solid #666;border-radius:6px;background:url(./checker.png)}
  #info {margin-top:.8rem;color:#00695c;font-weight:bold}
</style>
</head>
<body>
  <h1>🖋️ 文字列の描画デモ</h1>
  <canvas id="stage" width="600" height="360"></canvas>
  <p id="info">文字揃え・基準線の比較を行いました！</p>

<script>
(() => {
  const ctx = document.getElementById('stage').getContext('2d');
  const CAN_W = ctx.canvas.width;
  const CAN_H = ctx.canvas.height;
  const ROW_H = 60;
  const SAMPLE = 'Canvas文字列123';

  /* 背景のガイド線 */
  ctx.fillStyle = '#ccc';
  ctx.fillRect(200, 0, 1, CAN_H);   // 左基準線
  ctx.fillRect(400, 0, 1, CAN_H);   // 右基準線
  for (let y = ROW_H / 2; y <= CAN_H; y += ROW_H) {
    ctx.fillRect(0, y, CAN_W, 1);
  }

  /* 共通スタイル */
  ctx.font        = 'bold 32px sans-serif';
  ctx.lineWidth   = 2;
  ctx.fillStyle   = '#ffb74d';
  ctx.strokeStyle = '#1e88e5';

  /* 横方向の揃え比較（左側） */
  ['start','end','left','right','center'].forEach((align, i) => {
    ctx.textAlign    = align;
    ctx.textBaseline = 'middle';
    const y = ROW_H * (i + 0.5);
    ctx.fillText(SAMPLE, 200, y);
    ctx.strokeText(SAMPLE, 200, y);
  });

  /* 縦方向の揃え比較（右側） */
  ['top','hanging','middle','alphabetic','ideographic','bottom']
  .forEach((baseline, i) => {
    ctx.textAlign    = 'center';
    ctx.textBaseline = baseline;
    const y = ROW_H * (i + 0.5);
    ctx.fillText(SAMPLE, 400, y);
    ctx.strokeText(SAMPLE, 400, y);
  });

  /* 横幅計測例（コンソール表示） */
  console.log('描画幅:', ctx.measureText(SAMPLE).width, 'px');
})();
</script>
</body>
</html>

ブラウザの出力例

橙色 (fillText) と青い輪郭 (strokeText) が重なった見出しテキストが 2 列に並ぶ。
左列は 水平方向の基準 の違いを、右列は 垂直方向の基準 の違いを示す。
背景の格子線があるためどこが基準に合っているか一目瞭然

プログラム解説

行	内容	解説
23–26	背景ガイド線	揃え位置がずれていないか視覚確認用
33	`font` 指定	CSS と同じ書式でスタイル・サイズ・フォントファミリを一括設定
39	`textAlign` ループ	5 種の横揃えを `forEach` で順に適用して比較
48	`textBaseline` ループ	6 種の縦基準を同様に比較
57	`measureText`	実描画幅を取得し、可変レイアウト時の当たり判定などに利用

まとめ

テキストスタイルは font・textAlign・textBaseline の 3 要素で完全管理。
描画は 塗り (fillText) と 線 (strokeText) の 2 パターンを組み合わせて自由な装飾が可能。
measureText で実幅を取得すれば、吹き出しサイズ計算やスクロールエリア自動拡張などインタラクティブな UI に応用できる。

　この基礎を押さえれば、スコアボード・チャートラベル・動的字幕などあらゆるテキスト演出を自在にコントロールできます。