Convert CSS liniar gradient with offset color to canvas gradient

Question

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://i.stack.imgur.com/pxpVe.jpg
Expected result (apart from border radius): https://i.stack.imgur.com/iOuM6.jpg

  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>
  );
}```

you've shown the CSS, but you haven't shown how you are `trying to convert some figma filters, CSS liniar backgrounds to canvas gradient` - how can anyone tell you what you're doing wrong if you don't show your code — Bravo, Feb 28 '22 at 08:52
I have a group filters in figma and in that group I have like 4 layers with liniar gradient. I can apply the gradient but the gradient doesn't show correctly because I the CSS background the colors have offset and when I add the colors stops I need to add values between 0 and 1. I've check few stackoverflow posts, this is one of them https://stackoverflow.com/questions/45034238/css-convert-gradient-to-the-canvas-version — claudiu, Feb 28 '22 at 09:12
sure, that's a lot of words when all you need to do is show **your code** — Bravo, Feb 28 '22 at 09:14
and can you describe the problem other than "it looks different" - maybe some screenshots would help to show the difference — Bravo, Feb 28 '22 at 09:21
where in your code are you duplicating the "stop positions" ... `-23.93%` and `68.89%` for example — Bravo, Feb 28 '22 at 09:34
I was trying something similar like here https://stackoverflow.com/questions/54794337/converting-canvas-lineargradient-to-css-linear-gradient I'm not duplicating no where `-23.93%` and `68.89%` I've just tryed to add `+23.93%` to the background to get something like `linear-gradient(180deg, rgba(0, 0, 0, 0.0001), #000000 92.82%)` and after I try to multiply width and height like this ```const HALF_WIDTH = width * (100 / 92.82) * 0.5; const HALF_HEIGHT = height * (100 / 92.82) * 0.5;``` — claudiu, Feb 28 '22 at 09:39

score 0 · Answer 1 · answered Feb 04 '23 at 03:29

You can style your canvas elements with CSS. Which means you don't have to convert Figma's CSS into JavaScript code that attempts to duplicate the CSS formatting.

Head over to: How to style canvas elements with CSS

Convert CSS liniar gradient with offset color to canvas gradient

1 Answers1