Преобразование линейного градиента CSS со смещением цвета в градиент холста ⇐ CSS

[Anonymous]

Я пытаюсь преобразовать некоторые фильтры Figma, линейные фоны CSS в градиент холста. Проблема, с которой я столкнулся при преобразовании, — это смещение цвета фона. Я провел небольшое исследование и попытался сделать это на холсте, но результат не такой, как на Figma.
Вот лишь несколько примеров, которые я пытаюсь преобразовать/использовать с помощью холста.
Заранее спасибо за помощь.
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) -23.93%, #000000 68.89%);
background: linear-gradient(179.48deg, #619CCB -28.41%, #000000 64.05%);
background: linear-gradient(180deg, #286998 -40.17%, #001A35 72.14%);

Мой результат для (background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) -23.93%, #000000 68.89%);): https://i.sstatic.net/pxpVe.jpg

Ожидаемый результат (кроме радиуса границы): https://i.sstatic.net/iOuM6.jpg
const canvas = useRef(null);

useEffect(() => {
const ctx = canvas.current?.getContext('2d');

if (ctx) {
const w = 1080;
const h = 680;
const cssAng = 0;
const dir = getDir(cssAng, w, h);
const gr = ctx.createLinearGradient(dir.x0, dir.y0, dir.x1, dir.y1);
gr.addColorStop(0, 'rgba(0, 0, 0, 0.0001)');
gr.addColorStop(1, 'rgb(0, 0, 0)');
ctx.fillStyle = gr;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function getDir(radian: number, width: number, height: number) {
const HALF_WIDTH = width * 0.5;
const HALF_HEIGHT = height * 0.5;
const lineLength =
Math.abs(width * Math.sin(radian)) + Math.abs(height * Math.cos(radian));
const HALF_LINE_LENGTH = lineLength / 2;

const x0 = HALF_WIDTH + Math.sin(radian) * HALF_LINE_LENGTH;
const y0 = HALF_HEIGHT - Math.cos(radian) * HALF_LINE_LENGTH;
const x1 = width - x0;
const y1 = height - y0;

return { x0, x1, y0, y1 };
}
}, []);

return (
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
background: 'white',
}}
>


);
}```



Подробнее здесь: https://stackoverflow.com/questions/712 ... s-gradient