Use comparePixels() instead of compareCanvas()

src/view/CanvasView.js

@@ -88,6 +88,10 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
         }
     },
 
+    getContext: function() {
+        return this._context;
+    },
+
     /**
      * Converts the provide size in any of the units allowed in the browser to
      * pixels.

test/helpers.js

@@ -345,25 +345,24 @@ var compareItem = function(actual, expected, message, options, properties) {
  * @param {function} actualCallback the function producing the actual result
  * @param {number} tolerance between 0 and 1
  */
-var compareCanvas = function(width, height, expectedCallback, actualCallback,
-        tolerance) {
+var compareCanvas = function(width, height, expected, actual, tolerance) {
     function getImageData(width, height, callback) {
         var canvas = document.createElement('canvas');
         canvas.width = width;
         canvas.height = height;
         var project = new Project(canvas);
+        var view = project.view;
         callback();
-        project.view.update();
-        var context = canvas.getContext('2d');
-        var imageData = context.getImageData(0, 0, width, height);
-        canvas.remove();
+        view.update();
+        var imageData = view.context.getImageData(0, 0, width, height);
         project.remove();
+        canvas.remove();
         return imageData;
     }
 
     compareImageData(
-        getImageData(width, height, expectedCallback),
-        getImageData(width, height, actualCallback),
+        getImageData(width, height, expected),
+        getImageData(width, height, actual),
         tolerance
     );
 

test/tests/Group.js

@@ -137,21 +137,17 @@ test('group.addChildren()', function() {
 });
 
 test('group.setSelectedColor() with selected bound and position', function() {
-    compareCanvas(100, 100,
-        function() {
-            // working: set selected color first then add child
-            var group = new Group();
-            group.bounds.selected = true;
-            group.position.selected = true;
-            group.selectedColor = 'black';
-            group.addChild(new Path.Circle([50, 50], 40));
-        }, function() {
-            // failing: add child first then set selected color
-            var group = new Group();
-            group.bounds.selected = true;
-            group.position.selected = true;
-            group.addChild(new Path.Circle([50, 50], 40));
-            group.selectedColor = 'black';
-        }
-    );
+    // Working: Set selected color first then add child.
+    var group1 = new Group();
+    group1.bounds.selected = true;
+    group1.position.selected = true;
+    group1.selectedColor = 'black';
+    group1.addChild(new Path.Circle([50, 50], 40));
+    // Failing: Add child first then set selected color.
+    var group2 = new Group();
+    group2.bounds.selected = true;
+    group2.position.selected = true;
+    group2.addChild(new Path.Circle([50, 50], 40));
+    group2.selectedColor = 'black';
+    comparePixels(group1, group2);
 });