From 0bbffc06a8ea15c4edd14b2f5daa34d5328e1a0f Mon Sep 17 00:00:00 2001
From: "j.rousse" <j.rousse@arka-studio.fr>
Date: Wed, 28 Feb 2018 09:55:00 +0100
Subject: [PATCH] Fix - Issue #207 This fix aims to restore the functionality
 of being able to position the canvas element using the canvasid attribute.

---
 src/angular-pdf.directive.js | 8 +++++++-
 test/spec/ngPdfSpec.js       | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js
index 077266c..5fd1b5a 100644
--- a/src/angular-pdf.directive.js
+++ b/src/angular-pdf.directive.js
@@ -37,6 +37,7 @@ export const NgPdf = ($window, $document, $log) => {
       let renderTask = null;
       let pdfLoaderTask = null;
       let debug = false;
+      let canvas = null;
       let url = scope.pdfUrl;
       let httpHeaders = scope.httpHeaders;
       let pdfDoc = null;
@@ -44,7 +45,12 @@ export const NgPdf = ($window, $document, $log) => {
       let pageFit = attrs.scale === 'page-fit';
       let limitHeight = attrs.limitcanvasheight === '1';
       let scale = attrs.scale > 0 ? attrs.scale : 1;
-      let canvas = $document[0].createElement('canvas');
+
+      if (attrs.hasOwnProperty('canvasid')) {
+        canvas = $document[0].getElementById(attrs.canvasid);
+      } else {
+        canvas = $document[0].createElement('canvas');
+      }
       initCanvas(element, canvas);
       let creds = attrs.usecredentials;
       debug = attrs.hasOwnProperty('debug') ? attrs.debug : false;
diff --git a/test/spec/ngPdfSpec.js b/test/spec/ngPdfSpec.js
index 1c8dd0a..c38c5a7 100644
--- a/test/spec/ngPdfSpec.js
+++ b/test/spec/ngPdfSpec.js
@@ -14,7 +14,7 @@ describe('ngPdf', function() {
     var $document = _$document_;
     $scope = $rootScope.$new();
     // Compile a piece of HTML containing the directive
-    var html = '<ng-pdf template-url="partials/viewer.html" canvasid="pdf" scale="page-fit" page=13></ng-pdf>';
+    var html = '<ng-pdf template-url="partials/viewer.html" scale="page-fit" page=13></ng-pdf>';
     var elmnt = angular.element(html);
     $document.find('body').append(elmnt);
     element = $compile(elmnt)($scope);
@@ -70,7 +70,7 @@ describe('ngPdf protected', function() {
     var $document = _$document_;
     $scope = $rootScope.$new();
     // Compile a piece of HTML containing the directive
-    var html = '<ng-pdf template-url="partials/viewer.html" canvasid="pdf" scale="page-fit" page=13></ng-pdf>';
+    var html = '<ng-pdf template-url="partials/viewer.html" scale="page-fit" page=13></ng-pdf>';
     var elmnt = angular.element(html);
     $document.find('body').append(elmnt);
     element = $compile(elmnt)($scope);