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

Configuration:
- Web browser and its version: Firefox 93
- Operating system and its version: Windows 10 21H2
- PDF.js version: The integrated version
- Is a browser extension: no

Steps to reproduce the problem:
1. In the example, all shape and the "Line" cell of the first cell have a comment
2. Mouse over a "Line" cell or a shape, nothing appear except on mouse over their border
3. It is too difficult to use
4. There is also a vertical orientation issue reported in bug #7631

What is the expected behavior? (add screenshot)
Comments are shown on mouse hover or mouse click inside a cell or a shape

What went wrong? (add screenshot)
Comments are not shown when mouse hover or clicking inside a cell or a shape, only on their border

![image](https://user-images.githubusercontent.com/7791600/136419088-e083e2a3-d376-4d8c-9e0b-ce9dd5b83923.png)



constructor(
    parameters,
    {
      isRenderable = false,
      ignoreBorder = false,
      createQuadrilaterals = false,
    } = {}
  ) {
    this.isRenderable = isRenderable;
    this.data = parameters.data;
    this.layer = parameters.layer;
    this.page = parameters.page;
    this.viewport = parameters.viewport;
    this.linkService = parameters.linkService;
    this.downloadManager = parameters.downloadManager;
    this.imageResourcesPath = parameters.imageResourcesPath;
    this.renderForms = parameters.renderForms;
    this.svgFactory = parameters.svgFactory;
    this.annotationStorage = parameters.annotationStorage;
    this.enableScripting = parameters.enableScripting;
    this.hasJSActions = parameters.hasJSActions;
    this._fieldObjects = parameters.fieldObjects;
    this._mouseState = parameters.mouseState;
    if (isRenderable) {
      this.container = this._createContainer(ignoreBorder);
    }
    if (createQuadrilaterals) {