Pixi JS fill behaviour vs SVG fill behaviour

I'm wondering if there's a way to get the behaviour of Pixi.JS's Graphics API to fill the same way SVG paths are filled. I am guessing there may not be a quick-fix way to do this.

Basically, in SVGs when a path with a fill crosses over itself, the positive space will automatically get filled, whereas in the Pixi.JS Graphics API, if the path crosses itself it seems to try and fill the largest outside space.

This is quite difficult to explain in text so here is a codepen to show the differences between the two and how the same data will cause them to render in different ways.

And so you can see the code, here is my SVG:

<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="background-color:#5BBA6F">

    <path style="fill: #E74C3C; stroke:black; stroke-width:3" d="M 200 200 L 700 200 L 600 400 L 500 100 z" />
</svg>

And here is the Pixi.js implementation:

import * as PIXI from "https://cdn.skypack.dev/pixi.js";

 const app = new PIXI.Application({
      width: 800,
      height: 600,
      backgroundColor: 0x5bba6f
    });
app.start();
document.getElementById("root").appendChild(app.view)

const lineData = {
  color: 0xe74c3c,
  start: [200, 200],
  lines: [
    [700, 200],
    [600, 400],
    [500, 100],
  ]
};

  const { start, lines, color } = lineData;
  const g = new PIXI.Graphics();

    if (g) {
      g.clear();
      g.lineStyle({width:3})
      g.beginFill(color);
      g.moveTo(start[0], start[1]);
      lines.map((l) => g.lineTo(l[0], l[1]));
      g.closePath();
      g.endFill();
      app.stage.addChild(g);
    }

Thanks for taking a look.