canvasのテキストを中央配置

canvasでテキストを中央揃えするデモ。

canvasのテキストを中央配置する

const textArray: typeTextArray[] = [
  {
    id: "hogehoge", // id
    name: "ほげ", // 描画する文字
    x: 75, //ベースとなるX座標
    y: 50, //ベースとなるY座標
    fontSize: 16, // font-size
    color: "0,0,0", // font-color
    baseText: "ほげほげ", // ベースとなる文字
    mode: "center",
  },
];
/**
 * テキストを中心に配置するためのx座標を返す
 */
const setTextCenter = (
  textWidth: number,
  BASE_WIDTH: number,
  BASE_X: number
) => {
  const returnData = (BASE_WIDTH - textWidth) / 2 + BASE_X;
  //  (ベースとなるテキストのwidth - 描画するテキストのwidth) / 2 + ベースとなるx座標;

  //canvasの中央に配置したい場合
  // (ベースとなるテキストのwidth - canvasのwidth) / 2;
  return returnData;
};

参考サイト

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/measureText