Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added a pixelEquals function that checks if a given pixel of a canvas is equal to a provided rgba value #84

Closed
wants to merge 1 commit into from

2 participants

@DanielBaulig

The title pretty much says everything. I needed the test function for a project of mine and implemented it. I thought I might aswell share it with the qunit project.
Howto use pixelEquals:

var canvas = document.getElementById('myCanvas');
// draw something to the canvas that will set the pixel 
// at x = 50, y = 100 to fully red, 50% transparency

pixelEquals(canvas, 50, 100, 255, 0, 0, 127); // will yield a successfull test

I also added a testcase to the test suite. However, I wasn't sure where to actually put it, so I just added it to the end of test.js. Of course a canvas element is required for the test. I added it to the test's index.html.

If you like it, use it :)

Best regards,
Daniel

@DanielBaulig DanielBaulig Added pixelEquals (+ tests).
pixelEquals compares a specified pixel in a canvas to given rgba values. Tests might need rework.
c66030f
@jzaefferer
Owner

Thanks. Leaving the ticket open to add this to the documentation eventually, but won't add it to QUnit.

@jzaefferer
Owner

Thanks! I've (finally) landed this, as the first official addon: https://github.com/jquery/qunit/tree/master/addons/canvas
Renamed the method to pixelEqual to match the naming convention, and its namespaced within QUnit (no need to add more globals really).

@jzaefferer jzaefferer closed this
@DanielBaulig

cool, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 29, 2011
  1. @DanielBaulig

    Added pixelEquals (+ tests).

    DanielBaulig authored
    pixelEquals compares a specified pixel in a canvas to given rgba values. Tests might need rework.
This page is out of date. Refresh to see the latest.
Showing with 84 additions and 0 deletions.
  1. +5 −0 qunit/qunit.js
  2. +1 −0  test/index.html
  3. +78 −0 test/test.js
View
5 qunit/qunit.js
@@ -342,6 +342,11 @@ var QUnit = {
QUnit.push(expected !== actual, actual, expected, message);
},
+ pixelEquals: function(canvas, x, y, r, g, b, a, message) {
+ var actual = Array.prototype.slice.apply(canvas.getContext('2d').getImageData(x, y, 1, 1).data), expected = [r, g, b, a];
+ QUnit.push(QUnit.equiv(actual, expected), actual, expected, message);
+ },
+
raises: function(block, expected, message) {
var actual, ok = false;
View
1  test/index.html
@@ -14,5 +14,6 @@ <h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
+ <canvas id="qunit-canvas" width="5" height="5"></canvas>
</body>
</html>
View
78 test/test.js
@@ -312,3 +312,81 @@ module("custom assertions");
QUnit.reset = reset;
});
})();
+
+
+test("Canvas pixels", function () {
+ var canvas = document.getElementById('qunit-canvas'), context;
+ try {
+ context = canvas.getContext('2d');
+ } catch(e) {
+ // propably no canvas support, just exit
+ return;
+ }
+ context.fillStyle = 'rgba(0, 0, 0, 0)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 0, 0);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(255, 0, 0, 0)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 0, 0);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 255, 0, 0)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 0, 0);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 0, 255, 0)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 0, 0);
+ context.clearRect(0,0,5,5);
+
+ context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 255, 0, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 255, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 0, 255, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 0, 0, 0, 0, 255, 127);
+ context.clearRect(0,0,5,5);
+
+ context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 2, 2, 0, 0, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 2, 2, 255, 0, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 2, 2, 0, 255, 0, 127);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 0, 255, 0.5)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 2, 2, 0, 0, 255, 127);
+ context.clearRect(0,0,5,5);
+
+ context.fillStyle = 'rgba(0, 0, 0, 1)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 4, 4, 0, 0, 0, 255);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(255, 0, 0, 1)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 4, 4, 255, 0, 0, 255);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 255, 0, 1)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 4, 4, 0, 255, 0, 255);
+ context.clearRect(0,0,5,5);
+ context.fillStyle = 'rgba(0, 0, 255, 1)';
+ context.fillRect(0, 0, 5, 5);
+ pixelEquals(canvas, 4, 4, 0, 0, 255, 255);
+ context.clearRect(0,0,5,5);
+});
Something went wrong with that request. Please try again.