Convert Maps to PDF and open PDF Viewer

Question

I am trying to convert the map with some header text. The header keeps overlapping on the map instead of being above header and displaying the map below. I want to add a log and header besides it and display the map below the header can someone help. I am using open layers verion 7.2.2 to export used jsPDF and creating the canvas using CanvasRenderingContext2D.

Here is an POC of the same where I tried to achieve the same output: - EXPORT to PDF

Answer 1

To move the drawn image down save the context and translate it down

  mapContext.save();
  mapContext.translate(0, 50);

When drawing each part of the image you will need to replace setTransform with transform and use save and restore around the operation

        mapContext.save()
        CanvasRenderingContext2D.prototype.transform.apply(
          mapContext,
          matrix
        );
        mapContext.drawImage(canvas, 0, 0);
        mapContext.restore();

Afterwards restore the context to its default origin and add the header

  mapContext.restore();

https://stackblitz.com/edit/angular-nnsvbj?file=src/main.ts