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):

pageIndex: pageAreaParent.pageArea.children.indexOf(pageArea),
      pageSetIndex: 0,
    };
    let targetPageArea;
    let leader = null;
    let trailer = null;
    let hasSomething = true;
    let hasSomethingCounter = 0;
    let startIndex = 0;
    while (true) {
      if (!hasSomething) {
        mainHtml.children.pop();
        
        if (++hasSomethingCounter === MAX_EMPTY_PAGES) {
          warn("XFA - Something goes wrong: please file a bug.");
          return mainHtml;
        }
      } else {
        hasSomethingCounter = 0;
      }
      targetPageArea = null;
      this[$extra].currentPageArea = pageArea;
      const page = pageArea[$toHTML]().html;
      mainHtml.children.push(page);
      if (leader) {
        this[$extra].noLayoutFailure = true;
        page.children.push(leader[$toHTML](pageArea[$extra].space).html);
        leader = null;
      }
      if (trailer) {