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)



const color = this.data.backgroundColor || null;
    element.style.backgroundColor =
      color === null
        ? "transparent"
        : Util.makeHexColor(color[0], color[1], color[2]);
  }
  _dispatchEventFromSandbox(actions, jsEvent) {
    const setColor = (jsName, styleName, event) => {
      const color = event.detail[jsName];
      event.target.style[styleName] = ColorConverters[`${color[0]}_HTML`](
        color.slice(1)
      );
    };
    const commonActions = {
      display: event => {
        const hidden = event.detail.display % 2 === 1;
        event.target.style.visibility = hidden ? "hidden" : "visible";
        this.annotationStorage.setValue(this.data.id, {
          hidden,
          print: event.detail.display === 0 || event.detail.display === 3,
        });
      },
      print: event => {
        this.annotationStorage.setValue(this.data.id, {