canvas global composite operations

JavaScript performance comparison

Test case created by rezoner

Preparation code

<canvas width="640" height="640" id="testCanvas">
</canvas>
<script>
Benchmark.prototype.setup = function() {
    var ctx = document.getElementById("testCanvas").getContext('2d');
    var image = new Image();
    image.src = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAADAFBMVEX////Q8OCw8OD/AP9w8OBQ8OAw' + '8OAQ8OAQ0OAQsOAQkOAQcOAQUOAQMOAQEOAwEOAwMOAwUOAwcOAwkOAwsOAw0OBQ0OBQsOBQkOBQcOBQ' + 'UOBQMOBQEOBwEOBwMOBwUOBwcOBwkOBwsOBw0OCQ0OCQsOCQkOCQcOCQUOCQMOCQEOCwEOCwMOCwUOCw' + 'cOCwkOCwsOCw0ODQ0ODQsODQkODQcODQUODQMODQEODwEODwMODwUODwcODwkODwsODw0ODw0KDQ0KCw' + '0KCQ0KBw0KBQ0KAw0KAQ0KAQsKAQkKAQcKAQUKAQMKAQEKAwEKAwMKAwUKAwcKAwkKAwsKBQsKBQkKBQ' + 'cKBQUKBQMKBQEKBwEKBwMKBwUKBwcKBwkKBwsKCQsKCQkKCQcKCQUKCQMKCQEKCwEKCwMKCwUKCwcKCw' + 'kKCwsKDQsKDQkKDQcKDQUKDQMKDQEKDwEKDwMKDwUKDwcKDwkKDwsKDwsGDQsGCwsGCQsGBwsGBQsGAw' + 'sGAQsGAQkGAQcGAQUGAQMGAQEGAwEGAwMGAwUGAwcGAwkGBQkGBQcGBQUGBQMGBQEGBwEGBwMGBwUGBw' + 'cGCQeESQkGCQcGCQUGCQMGCQEGCwEGCwMGCwUGCwcGCwkGDQkGDQcGDQUGDQMGDQEGDwEGDwMGDwUGDw' + 'cGDwkGDwkCDQkCCwkCCQkCBwkCBQkCAwkCAQkCAQcCAQUCAQMCAwMCAwECBQECBQMCBQUCAwUCAwcCBQ' + 'cCBwcCBwUCBwMCBwECCQECCQMCCQUCCQcCCwcCCwUCCwMCCwECDQECDQMCDQUCDQcCDwcCDwUCDwMCDw' + 'ECDwsCDQsCCwsCCQsCBwsCBQsCAwsCAQsCAQ0CAQ8CAw8CAw0CBQ0CBQ8CBw8CBw0CCQ0CCQ8CCw8CCw' + '0CDQ0CDQ8CDw8CDw0CDw0GDQ0GCw0GCQ0GBw0GBQ0GAw0GAQ0GAQ8GAw8GBQ8GBw8GCQ8GCw8GDQ8GDw' + '8GDw8KDQ8KCw8KCQ8KBw8KBQ8KAw8KAQ8KAAAACchDcsAAABAHRSTlP///8A////////////////////' + '////////////////////////////////////////////////////////////////////////////////' + '////////////////////////////////////////////////////////////////////////////////' + '////////////////////////////////////////////////////////////////////////////////' + '////////////////////////////////////////////////////////////////////////////M8r4' + 'fwAAAmRJREFUeNrtlzt2qzAQhjnHO/IGsGvqZBF+LEAp2UFIUhH6oDKaMy6YWyCsdflqeFnYMTaouLfI' + 'yDJ6/PoOQsNIBAtPC34B/z8A3t5gFoAQUSkFtdmCrdIUgDv8jJgxBTuDe3MIxsdjQjhOuAkAsL8WwMUZ' + 'AEgUMYBUAtMBcGUjAGSj1grXvnnk96Cp09WDGgC+rF/WeVVV+frlItVYvGruxcgAkFrq0rCVWrqJpNLW' + 'lC0MOhwxWEAhpChNugt3qSltWfdZC3YnhXXx3OGKiwZQmTQMgiBMTXUJILoEDMQtwJhd8BQ9BTtj7gMG' + 'YgYctDYmDKIoCkJjtCbdZdKqtrrYdwzEBwbcvAMpmlUYPJihmAFIBf2hj81m82Gv5Go1wOkEoF0AOeKC' + 'kAGr3Wq/3y/Dpf1foQug15O1V3IB6Ih3KwYAt3dLK1yAfRMYkKB7W+iIpWA/WBwke4dtYs9Am2WTrbcq' + 'noKNJdQ31oJOLA/Nu2B95fBDggSS9+fnd3uBHwVK9W8j3DAVL5exutV7JyJxGIm2xmyjsXhyB7CthKi2' + 'HoDSCGHKmQBm6NSYVMP8qKw/jfn0ARSZMVnhBzh6AUgcjSAvQHX0ASwoP1Y5eZwPMK+yHL0AWeUH0CLT' + 'foBMeAFAC6HhXwKI4pjmLyOQxDhGOepJI/EAObDbO7CxGKfHA2g2A71cNtsKwcSDZrc3dQChJx00QVwD' + 'BDwOgPMezVtwV4HHAdt1mxjQVyYA8Et/Sc4MkG0FYcIzoBbAZ7kWQDBtGYGIx9izoKURAUz3xHpMfZgc' + '2VfufvIgen4zeQN+vxsfsL9K1lXA+I+KIQAAAABJRU5ErkJggg==';
   
   
    function draw(operation) {
        ctx.globalCompositeOperation = operation;
        ctx.drawImage(image, 0, 0);
    }
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
source-over
draw("source-over");
pending…
source-in
draw("source-in");
pending…
source-out
draw("source-out");
pending…
source-atop
draw("source-atop");
pending…
lighter
draw("lighter");
pending…
xor
draw("xor");
pending…
destination-over
draw("destination-over");
pending…
destination-in
draw("destination-in");
pending…
destination-out
draw("destination-out");
pending…
destination-atop
draw("destination-atop");
pending…
copy
draw("copy");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment