vertical skew HTML5-canvas vs. CSS3

JavaScript performance comparison

Revision 5 of this test case created

Preparation code

<canvas id="canvas" width="320" height="320">
</canvas>
<img id="png" src="http://mehreinfach.de/samples/300x300.png">
<img id="png2" src="http://mehreinfach.de/samples/300x300copy.png">
<script>
Benchmark.prototype.setup = function() {
    var context = document.getElementById('canvas').getContext('2d');
    var png = document.getElementById('png');
    var png2 = document.getElementById('png2');
    var tmpValue = Math.sin((new Date) / 1000);
};
</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
skew via HTML5 canvas
canvas.width = canvas.width;
context.transform(1, 0, tmpValue, 1, 0, 0);
context.drawImage(png, 10, 10);
pending…
skew via CSS3
png.style.webkitTransform = "skewX(" + (tmpValue * 30) + "deg) translateY(150px)";
pending…
skew 8 images via HTML5 canvas
canvas.width = canvas.width;
context.transform(1, 0, tmpValue, 1, 0, 0);
context.drawImage(png, 10, 10);
context.transform(1, 0, -tmpValue, 1, 0, 0);
context.drawImage(png2, 10, 10);
context.transform(1, 0, -tmpValue, 1, 0, 0);
context.drawImage(png, 10, 10);
context.transform(1, 0, tmpValue, 1, 0, 0);
context.drawImage(png2, 10, 10);
context.transform(1, 0, tmpValue, 1, 0, 0);
context.drawImage(png, 10, 10);
context.transform(1, 0, -tmpValue, 1, 0, 0);
context.drawImage(png2, 10, 10);
context.transform(1, 0, -tmpValue, 1, 0, 0);
context.drawImage(png, 10, 10);
context.transform(1, 0, tmpValue, 1, 0, 0);
context.drawImage(png2, 10, 10);
pending…
skew 8 images via CSS3
png.style.webkitTransform = "skewX(" + (tmpValue * 30) + "deg) translateY(150px)";
png2.style.webkitTransform = "skewX(" + (-tmpValue * 30) + "deg) translateY(150px)";
png.style.webkitTransform = "skewX(" + (tmpValue * 30) + "deg) translateY(10px)";
png2.style.webkitTransform = "skewX(" + (-tmpValue * 30) + "deg) translateY(10px)";
png.style.webkitTransform = "skewX(" + (tmpValue * 30) + "deg) translateY(150px)";
png2.style.webkitTransform = "skewX(" + (-tmpValue * 30) + "deg) translateY(150px)";
png.style.webkitTransform = "skewX(" + (tmpValue * 30) + "deg) translateY(10px)";
png2.style.webkitTransform = "skewX(" + (-tmpValue * 30) + "deg) translateY(10px)";
pending…
Canvas without skew
canvas.width = canvas.width;
context.drawImage(png, 10, 10);
pending…
Canvas with skew and scale
canvas.width = canvas.width;
context.transform(0.8, 0, tmpValue, 0.8, 0, 0);
context.drawImage(png, 10, 10);
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