Centering the gradient to the canvas

Pika, Pika! Помогите понять как центрировать градиент в тексте :c

const [width, height] = [635, 635];

const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');

const image = await loadImage("./image/bg.png");
ctx.drawImage(image, 0, 0);

ctx.fillStyle = "#00000";
ctx.font = '65.58px regular';
ctx.fillText(nick, -30, -30, 320, 80); // sorry for the shit code :D

const pos = { x: 370, y: 410.5 };
const textWidth = ctx.measureText(nick).width;
const textHeight = 78.83;

const gradient = ctx.createLinearGradient(0, 0, textWidth, textWidth);
gradient.addColorStop(0.5, "white");
gradient.addColorStop(0.52, "red");

ctx.fillStyle = gradient;
ctx.font = '65.58px regular';
ctx.textAlign = "center";
ctx.textBaseline = "center";
ctx.fillText(nick, pos.x, pos.y, 320, textHeight);

Должно быть так:

Но мой мозг не может понять, как градиент работает в canvas, и получается вот так:

Help me :(