Estoy tratando de convertir algunos filtros figma, fondos lineales CSS en degradado de lienzo. El problema que tengo con la conversión es el color de compensación del fondo. Investigué un poco y traté de hacer esto en lienzo, pero el resultado no es como en figma. Estos son solo algunos ejemplos que estoy tratando de convertir/usar con canvas.

Gracias de antemano por la ayuda.

 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%);

Mi resultado para ( background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) -23.93%, #000000 68.89%); ): https://imgur.com/uF5Rkli
Resultado esperado (aparte del radio del borde): https://imgur.com/cqxBraM

 const canvas = useRef<HTMLCanvasElement>(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 ( <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw', background: 'white', }} > <canvas ref={canvas} width={1080} height={680} /> </div> ); }```