HTML Canvasで文字を中央に配置する

タイトル通りですがCanvasで文字を中央に配置する方法です。

textAlign に center 、textBaseLine に middle を指定して開始位置を中心に持ってくるようにするだけです

export type Rect = { width: number, height: number, x: number, y: number };

const rect: Rect = {
    x: 20,
    y: 50,
    width: 160,
    height: 70,
};

// 背景
context.fillStyle = "#ffffff";
context.fillRect(rect.x, rect.y, rect.width, rect.height);

context.fillStyle = "#000000";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("再現CG", rect.x + rect.width / 2, rect.y + rect.height / 2, rect.width);

結果はこんな感じになります