diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts
index 021909b93..c27bf8363 100644
--- a/packages/geo/src/lib/print/shared/print.service.ts
+++ b/packages/geo/src/lib/print/shared/print.service.ts
@@ -179,12 +179,15 @@ export class PrintService {
         this.addGeoRef(doc, map, width, height, baseMargins);
         await this.handleMeasureLayer(doc, map, baseMargins);
         if (options.showNorthArrow) {
-          const arrawCanvas = await this.createNorthDirectionArrow(map);
-          await this.addNorthDirectionArrow(
+          const northArrowCanvas = await this.createNorthDirectionArrow(
+            map.viewController.getRotation()
+          );
+          await this.addNorthArrowInDoc(
             doc,
-            arrawCanvas,
+            northArrowCanvas,
             baseMargins,
-            legendPostion
+            legendPostion,
+            width
           );
         }
         if (options.legendPosition !== 'none') {
@@ -926,26 +929,48 @@ export class PrintService {
     mapOverlayHTML.remove();
   }
 
-  private async addNorthDirectionArrow(
-    doc: jsPDF,
+  private async addNorthArrowInDoc(
+    doc: jsPDF | CanvasRenderingContext2D,
     arrawCanvas: HTMLCanvasElement,
     baseMargins: [number, number, number, number],
-    legendPosition: PrintLegendPosition
-  ): Promise<void> {
-    let xPosition = this.imgSizeAdded[0] - baseMargins[1];
-    let yPosition = baseMargins[0];
-    if (legendPosition === 'topright') {
-      xPosition = 10;
-      yPosition = 10;
+    legendPosition: PrintLegendPosition,
+    width: number,
+    yPosition: number = 0
+  ) {
+    let xPosition: number = 0;
+    let northArrowDimension: number = 0;
+    if (doc instanceof CanvasRenderingContext2D) {
+      northArrowDimension = 50;
+      xPosition =
+        legendPosition === 'topright' ? 0 : width - northArrowDimension;
+      doc.drawImage(
+        arrawCanvas,
+        xPosition,
+        yPosition,
+        northArrowDimension,
+        northArrowDimension
+      );
+    } else {
+      northArrowDimension = 16;
+      xPosition = legendPosition === 'topright' ? 10 : width - baseMargins[1];
+      yPosition = legendPosition === 'topright' ? 10 : baseMargins[0];
+      doc.addImage(
+        arrawCanvas.toDataURL(),
+        xPosition,
+        yPosition,
+        northArrowDimension,
+        northArrowDimension
+      );
     }
-    doc.addImage(arrawCanvas.toDataURL(), xPosition, yPosition, 16, 16);
   }
 
+  /**
+   * @param rotation - map rotation 'rad' unit
+   *
+   */
   private async createNorthDirectionArrow(
-    map: IgoMap
+    rotation: number
   ): Promise<HTMLCanvasElement> {
-    const rotation = map.viewController.getRotation();
-
     const div = this.document.createElement('div');
     div.style.maxWidth = '50mm';
     div.style.maxHeight = '50mm';
@@ -1176,19 +1201,16 @@ export class PrintService {
       newContext.drawImage(mapResultCanvas, 0, positionHCanvas);
 
       if (showNorthArrow) {
-        const northDirectionArrowCanvas =
-          await this.createNorthDirectionArrow(map);
-        const northArrowDimension = [50, 50];
-        let yNorthPosition = width - northArrowDimension[0];
-        if (legendPosition === 'topright') {
-          yNorthPosition = 0;
-        }
-        newContext.drawImage(
-          northDirectionArrowCanvas,
-          yNorthPosition,
-          positionHCanvas,
-          northArrowDimension[0],
-          northArrowDimension[1]
+        const northArrowCanvas = await this.createNorthDirectionArrow(
+          map.viewController.getRotation()
+        );
+        await this.addNorthArrowInDoc(
+          newContext,
+          northArrowCanvas,
+          null,
+          legendPosition,
+          width,
+          positionHCanvas
         );
       }