How to merge two intersecting shapes using ctxRenderer in vis-network?

Question

I want to get the merged shape and contour of two intersecting ellipses, but now I can't remove the redundant lines inside and only keep the contour,

{
      id: 1,
      label: "Node5",
      shape: "custom",
      ctxRenderer: ({
        ctx,
        id,
        x,
        y,
        state: { selected, hover },
        style,
      }) => {
        const r = style.size;
        const drawNode = () => {
          ctx.beginPath();
    
          // Draw first ellipse
          ctx.ellipse(x, y, r, r/2, 0, 0, 2 * Math.PI);
    
          // Draw second ellipse, rotated and translated
          ctx.save();
          ctx.translate(x, y);
          ctx.rotate(Math.PI / 2);
          ctx.ellipse(0, 0, r, r/2, 0, 0, 2 * Math.PI);
          ctx.restore();
    
          // Close the path
          ctx.closePath();
    
          // Fill and stroke the combined shape
          ctx.fillStyle = "yellow";
          ctx.fill();
          ctx.strokeStyle = "black";
          ctx.stroke();
        };
        return {
          drawNode,
          nodeDimensions: { width: 2 * r, height: 2 * r },
        };
      },
    }

It seems that the closePath() function is not executed correctly, how should I do it correctly?