resize mask canvas for viewer.html in skpdiff tool

tools/skpdiff/diff_viewer.js

Index: tools/skpdiff/diff_viewer.js
diff --git a/tools/skpdiff/diff_viewer.js b/tools/skpdiff/diff_viewer.js
index 06a864edf4e219ade95c0c322cc14d935e3141b5..6be434b4db17be05f0e85866b5cbd6d17e16e02c 100644
--- a/tools/skpdiff/diff_viewer.js
+++ b/tools/skpdiff/diff_viewer.js
@@ -20,12 +20,14 @@ directive('imgCompare', function() {
           var ctx = canvas.getContext('2d');
 
           var magnifyContent = false;
+          var maskCanvas = false;
 
           // When the type attribute changes, load the image and then render
           attrs.$observe('type', function(value) {
               switch(value) {
                 case "alphaMask":
                     image.src = scope.record.differencePath;
+                    maskCanvas = true;
                     break;
                 case "baseline":
                     image.src = scope.record.baselinePath;
@@ -55,11 +57,29 @@ directive('imgCompare', function() {
                   canvas.width = image.width * scope.imgScaleFactor;
                   canvas.height = image.height * scope.imgScaleFactor;
 
+                  // update the size for non-alphaMask canvas when loading baseline image
+                  if (!scope.maskSizeUpdated) {
+                      if (!maskCanvas) {
+                          scope.updateMaskCanvasSize({width: canvas.width, height: canvas.height});
+                      }
+                      scope.maskCanvasSizeUpdated(true);
+                  }
+
                   // render the image onto the canvas
                   scope.renderImage();
               }
           });
 
+          // when updatedMaskSize changes, update mask canvas size.
+          scope.$watch('updatedMaskSize', function(updatedSize) {
+              if (!maskCanvas) {
+                  return;
+              }
+
+              canvas.width = updatedSize.width;
+              canvas.height = updatedSize.height;
+          });
+
           // When the magnify attribute changes, render the magnified rect at
           // the default zoom level.
           scope.$watch('magnifyCenter', function(magCenter) {
@@ -166,6 +186,8 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.imgScaleFactor = 1.0;
   $scope.magnifierOn = false;
   $scope.magnifyCenter = undefined;
+  $scope.updatedMaskSize = undefined;
+  $scope.maskSizeUpdated = false;
 
   $scope.setImgScaleFactor = function(scaleFactor) {
     $scope.imgScaleFactor = scaleFactor;
@@ -178,6 +200,14 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.setMagnifyCenter = function(magnifyCenter) {
       $scope.magnifyCenter = magnifyCenter;
   }
+
+  $scope.updateMaskCanvasSize = function(updatedSize) {
+      $scope.updatedMaskSize = updatedSize;
+  }
+
+  $scope.maskCanvasSizeUpdated = function(flag) {
+      $scope.maskSizeUpdated = flag;
+  }
 }
 
 function DiffListController($scope, $http, $location, $timeout, $parse) {