canvasで特定の幅で文字を折り返して表示する

やりたいこと

canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。
何も処理しないと↓みたいに文字が詰まって表示される

実装

①文字を任意の文字数ごとに分割して配列に入れていく

// 表示したいテキスト
const src = "あ".repeat(30);
const results = [];
let tmp = "";
src.split("").map((row) => {
  tmp = tmp + row;
  // 16文字の場合に配列に入れる
  if (tmp.length === 16) {
    results.push(tmp);
    // 文字カウント用の変数をクリア
    tmp = "";
  }
});
// 16文字に満たなかった残りの文字を配列に追加する
const length = results.join("").length;
results.push(src.slice(length));

②配列の文字列をfillText()で描画していく

ctx.fillStyle = "black";
ctx.font = "16px serif";
results.map((result, index) => {
  // 16px*インデックス でY軸を指定する
  ctx.fillText(result, 0, 30 + (16 * index));
});

コード全文

See the Pen Untitled by miyata (@m1y474) on CodePen.