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..f9a549e11478f62795f4f1178e7c43991e765728 100644
--- a/tools/skpdiff/diff_viewer.js
+++ b/tools/skpdiff/diff_viewer.js
@@ -26,6 +26,7 @@ directive('imgCompare', function() {
               switch(value) {
                 case "alphaMask":
                     image.src = scope.record.differencePath;
+                    scope.setHWRatio4MaskCanvas(canvas.height / canvas.width);

[djsollen, 2013/12/09 16:40:12]

I think you can remove this.  The width and height of the canvas will not be
that of the image until the image.onload completes so I don't see the benefit
here.

[yunchao, 2013/12/10 05:58:31]

Agree!

                     break;
                 case "baseline":
                     image.src = scope.record.baselinePath;
@@ -55,6 +56,10 @@ directive('imgCompare', function() {
                   canvas.width = image.width * scope.imgScaleFactor;
                   canvas.height = image.height * scope.imgScaleFactor;
 
+                  // Set the ratio of height / width for mask canvas according
+                  // to baseline and test canvas
+                  scope.setHWRatio4MaskCanvas(canvas.height / canvas.width);

[djsollen, 2013/12/09 16:40:12]

it seems like we only want to do this for the non-alphaMask canvas.  I think
your missing some kind of conditional check here.

[yunchao, 2013/12/10 05:58:31]

Done.

+
                   // render the image onto the canvas
                   scope.renderImage();
               }
@@ -134,6 +139,7 @@ directive('imgCompare', function() {
                   return;
               }
 
+              canvas.height = canvas.width * scope.HWRatio4MaskCanvas;

[djsollen, 2013/12/09 16:40:12]

why does the canvas height need to be set each time the magnifier is drawn. It
seems like it should only need to be done one time.

[yunchao, 2013/12/10 05:58:31]

Done, resize non-alphaMask canvas when loading image and resizing baseline
canvas.

               scope.renderImage();
 
               // render the magnifier outline rect
@@ -166,6 +172,7 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.imgScaleFactor = 1.0;
   $scope.magnifierOn = false;
   $scope.magnifyCenter = undefined;
+  $scope.HWRatio4MaskCanvas = 0;
 
   $scope.setImgScaleFactor = function(scaleFactor) {
     $scope.imgScaleFactor = scaleFactor;
@@ -178,6 +185,12 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.setMagnifyCenter = function(magnifyCenter) {
       $scope.magnifyCenter = magnifyCenter;
   }
+
+  $scope.setHWRatio4MaskCanvas = function(ratio) {
+      if (ratio > $scope.HWRatio4MaskCanvas) {

[djsollen, 2013/12/09 16:40:12]

I don't see why the setter should be conditional. I think you are just calling
the setter too many times.

[yunchao, 2013/12/10 05:58:31]

Agree. have updated this patch accordingly.

+          $scope.HWRatio4MaskCanvas = ratio;
+      }
+  }
 }
 
 function DiffListController($scope, $http, $location, $timeout, $parse) {