How to add an image on top of the canvas in header using pdfmake?

Question

I am using node to create a PDF. I am trying to make a header that looks similar to this:

The white part is the logo, and the background is blue-ish. So far I only have the background using canvas (actually a rectangle), but I can't seem to fit an image on top of it.

I tried to define the header like this:

    header: { canvas: [
      { image: `PATH_TO_LOGO`,
        width: 100, },
      {
        type: 'rect',
        x: 0,
        y: 0,
        w: 850, // landscape
        h: 120, 
        color: '#0067B9',
      },
    ],
    },

But the logo doesn't show. I looked at documentation, but haven't had much luck. Is this even the correct approach?

Answer 1

You need to add margin to your image. Try something like this:

header:  [
    {
        canvas: [
            {
                type: 'rect',
                x: 0,
                y: 0,
                w: 850, // landscape
                h: 120,
                color: '#0067B9'
            }
        ]
    },
    {
        image: `PATH_TO_LOGO`,
        width: 100,
        margin: [0, -120, 0, 0] // -120 is your rect height
    },
]