canvas global composite operations
JavaScript performance comparison
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.
| Test | Ops/sec | |
|---|---|---|
source-over |
|
pending… |
source-in |
|
pending… |
source-out |
|
pending… |
source-atop |
|
pending… |
lighter |
|
pending… |
xor |
|
pending… |
destination-over |
|
pending… |
destination-in |
|
pending… |
destination-out |
|
pending… |
destination-atop |
|
pending… |
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:
- Revision 1: published by rezoner
0 comments