Table's fillColor does not work after adding an image with absolutePosition

[kentadrian]

Hi! I am using pdfmake on the client side.

Here's the code ready for the playground.

var dd = {
    content: [
        {
            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAITSURBVHhe7dIxAcAwDMCwrPw5Z08h1J/0mIC/3R147dzCU8YiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsEsYiYSwSxiJhLBLGImEsAjM/IQoEjdJH3k0AAAAASUVORK5CYII=',
            width: 600,
            absolutePosition: {
                x: 0, y: 0,
            },
        },
        {
          table: {
            body: [
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
            ]
          },
          layout: {
            fillColor: function (rowIndex, node, columnIndex) {
              return (rowIndex % 2 === 0) ? '#CCCCCC' : null;
            }
          }
        },
    ]
}

Output:

Expected Output:

I need the image to be the background of the whole page, just 1 page not all pages, and add the table on top of it.

[vpo-dev]

Moving the image (for instance by setting x to 50) shows the grey color for the part of the table not overlapping on the image. So I wonder if it is not an issue coming from pdfKit itself and not from pdfMake. Note: The encoded image seems to be a white rectangle. Using another image shows the image is correctly displayed behind the table.

[vpo-dev]

It is also possible to reproduce with a canvas instead of an image.

var dd = {
    content: [
        {           absolutePosition: {
                x: 10, y: 10,
            },
            canvas: [
                {
                    type: 'rect',
                    x: 1,
                    y: 1,
                    w: 100,
                    h: 100,
                    color: 'orange',
                    fillOpacity: 0.45
                },
            ]
        },
        {
          table: {
            body: [
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
              ['Sample value 1', 'Sample value 2', 'Sample value 3'],
            ]
          },
          layout: {
            fillColor: 'lightblue'
          }
        },
    ]
}

Result:

[vpo-dev]

In one of my past comment :

So I wonder if it is not an issue coming from pdfKit itself and not from pdfMake.

No, I was wrong. The fix proposed in #1223 solves this issue. However, the code in function TableProcessor.prototype.endRow where the fix is applied has changed since the fix proposal. Thus, I don't know if the fix used as-is could break something else.

Update: The proposed patch in #1223 works to manage the fill color cells, but it as side effects on horizontal line drawing. So it cannot be used.