Attach (recommended) or Link to PDF file here:
[arcs.pdf](https://github.com/mozilla/pdf.js/files/7610486/arcs.pdf)

Configuration:
- Web browser and its version: 96.0a1 (2021-11-26) (64-bit)
- Operating system and its version: Windows 10
- PDF.js version:
- Is a browser extension:

Steps to reproduce the problem:
1. Open PDF

What is the expected behavior? (add screenshot)
Arcs are drawn correctly, and can render on top of each other
![image](https://user-images.githubusercontent.com/7104454/143624981-1a45c37a-bc30-4b64-893a-684da9cdfe3b.png)

What went wrong? (add screenshot)
![image](https://user-images.githubusercontent.com/7104454/143624965-5506df08-3510-4e60-908f-d64499050660.png)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

this[$extra].noLayoutFailure = true;
        page.children.push(trailer[$toHTML](pageArea[$extra].space).html);
        trailer = null;
      }
      const contentAreas = pageArea.contentArea.children;
      const htmlContentAreas = page.children.filter(node =>
        node.attributes.class.includes("xfaContentarea")
      );
      hasSomething = false;
      this[$extra].firstUnsplittable = null;
      this[$extra].noLayoutFailure = false;
      const flush = index => {
        const html = root[$flushHTML]();
        if (html) {
          hasSomething =
            hasSomething || (html.children && html.children.length !== 0);
          htmlContentAreas[index].children.push(html);
        }
      };
      for (let i = startIndex, ii = contentAreas.length; i < ii; i++) {
        const contentArea = (this[$extra].currentContentArea = contentAreas[i]);
        const space = { width: contentArea.w, height: contentArea.h };
        startIndex = 0;
        if (leader) {
          htmlContentAreas[i].children.push(leader[$toHTML](space).html);
          leader = null;
        }
        if (trailer) {
          htmlContentAreas[i].children.push(trailer[$toHTML](space).html);
          trailer = null;