0

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

1 Answers1

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

Mike
  • 16,042
  • 2
  • 14
  • 30
  • This solution also works. Also found a work around since I had to add properties below the image as well. jsPDF provides and X and Y co-ordinates which can be played to set the elements inside the canvas. – Rushabh Gandhi Mar 10 '23 at 19:25