I'm trying to convert some figma filters, CSS liniar backgrounds to canvas gradient. The issue which I have with the conversion is the offset color of the background. I've done some research and tried to do this in canvas but the result is not how is in figma. Here are just few examples which I'm trying to convert/use with canvas.

Thank you in advance for help.

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

My result for (background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) -23.93%, #000000 68.89%);): https://imgur.com/uF5Rkli
Expected result (apart from border radius): 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>
  );
}```