'Use SVG with multiple paths as background image in HTML Canvas

I'm trying to render a background image in a HTML Canvas from a huge SVG. It would add like a map, where I will place some other images.

The SVG I'm trying to render has multiple paths. So I started with the minimal case: grabbing one of those paths and painting it via Path2D object. But I cannot see anything in the canvas.

This is an example of the image I'm trying to render as BG:

This is one of the paths I'm trying to render (top right terrain):

If I add this path into an SVG like this, I can see it properly in the window:

But when trying to paint it with canvas, anything happens. This is the code that tries to render that terrain part in the Canvas (in a React App):

const MapCanvas: React.FC<{}> = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const canvasCtxRef = useRef<CanvasRenderingContext2D | null>(null);

  useEffect(() => {
    // Initialize
    if (canvasRef.current) {
      canvasCtxRef.current = canvasRef.current.getContext("2d");
      let ctx = canvasCtxRef.current;
      let p = new Path2D(
        "M1655.29-211.95c-2.15,0-4.26,0.57-6.12,1.64L1358.32-42.39l0,0l-7.69,4.44l-47.38,27.35 c-8.16,4.71-8.16,16.48,0,21.19l0,0c8.16,4.71,8.16,16.48,0,21.19l-18.36,10.6l-36.72,21.2l-18.36,10.6 c-8.16,4.71-8.16,16.48,0,21.19l0.01,0c8.16,4.71,8.16,16.48,0,21.19l-18.36,10.6l-36.71,21.2l-18.36,10.6 c-8.16,4.71-8.16,16.48,0,21.19l0.01,0c8.16,4.71,8.16,16.48,0,21.19l-18.36,10.6l-18.36,10.6c-8.16,4.71-8.16,16.48,0,21.19v0 c8.16,4.71,8.16,16.48,0,21.19l-0.01,0.01c-8.16,4.71-8.16,16.48,0,21.19l0.01,0.01c8.16,4.71,8.16,16.48,0,21.19l0,0 c-8.16,4.71-8.16,16.48,0,21.19l0.01,0c8.16,4.71,8.16,16.48,0,21.19l0,0c-8.16,4.71-8.16,16.48,0,21.19l18.36,10.6l30.59,17.66 c3.79,2.18,8.45,2.18,12.23,0l24.48-14.13c3.79-2.19,8.45-2.18,12.23,0l30.6,17.67l30.58,17.66c3.79,2.19,8.45,2.19,12.24,0 l24.47-14.13c3.79-2.19,8.45-2.19,12.24,0l30.6,17.67l36.7,21.19l30.6,17.67c3.79,2.19,8.45,2.19,12.24,0l24.48-14.14 c3.79-2.19,8.45-2.19,12.24,0l24.47,14.13c3.79,2.19,8.45,2.19,12.24,0l24.47-14.13c3.79-2.19,8.45-2.19,12.24,0l24.47,14.13 c3.79,2.19,8.45,2.19,12.24,0l24.47-14.13c3.79-2.19,8.45-2.19,12.24,0l24.47,14.13c3.79,2.19,8.45,2.19,12.24,0l24.47-14.13 c3.79-2.19,8.45-2.19,12.24,0l24.47,14.13c3.79,2.19,8.45,2.19,12.24,0l30.59-17.67l36.71-21.19l36.71-21.2l30.6-17.67 c3.79-2.19,8.45-2.19,12.24,0l24.49,14.14c3.79,2.19,8.45,2.19,12.23,0l30.59-17.66l36.71-21.2l36.71-21.19l36.71-21.2 l211.68-122.21c5.01-2.89,7.31-8.9,5.51-14.39l-125.62-384.84c-1.64-5.03-6.34-8.44-11.63-8.44H1655.29z"
      );
      ctx!.fill(p);
    }
  }, []);
  return <canvas ref={canvasRef}></canvas>;
};

But anything is showed in the window. I'm not an expert with canvas so I'm missing something here. I would like to paint each path in the canvas like they are in the svg image, and make it the background of the Canvas.

Do anybody can make me 5 cents of what am I missing?

Thanks!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Use SVG with multiple paths as background image in HTML Canvas

Sources

Related Questions