vertical skew HTML5-canvas vs. CSS3

JavaScript performance comparison

Revision 6 of this test case created by vincent piel

Preparation code

<canvas id="canvas" width="320" height="320">
</canvas>
<img id="png" src="http://www.tunisie-tribune.com/wp-content/uploads/2013/08/ESS-LOGO-300-PNG-300x330.png">
<img id="png2" src="http://www.tunisie-tribune.com/wp-content/uploads/2013/08/ESS-LOGO-300-PNG-300x330.png">
<script>
Benchmark.prototype.setup = function() {
    var context = document.getElementById('canvas').getContext('2d');
    var png = document.getElementById('png');
    var png2 = document.getElementById('png2');
    var angle = (Date.now()) / 4000 ;
    //var angleDeg = angle * 30 ; // 0 |  ( 360 * angle / (2*Math.PI) );
    var tmpValue = Math.sin(angle);
    var angleDeg = tmpValue*30;
   
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        // At least Safari 3+: "[object HTMLElementConstructor]"
    var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
    var isIE = /*@cc_on!@*/false || document.documentMode;
   
    var uagent = navigator.userAgent.toLowerCase();
    var isiOS = (uagent.search("iphone") > -1 ||
        uagent.search("ipod") > -1 ||
        uagent.search("ipad") > -1 ||
        uagent.search("appletv") > -1) ;
   
    var transform=null;
    if (isSafari || isChrome || isiOS) transform ='webkitTransform';
    if (isOpera) transform = 'OTransform';
    if (isFirefox) transform = 'MozTransform';
   
    window.transform=transform;
};
</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[transform] = "skewX(" + (angleDeg) + "deg)";
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[transform] = "skewX(" + (angleDeg) + "deg) translateY(150px)";
png2.style[transform] = "skewX(" + (-angleDeg ) + "deg) translateY(150px)";
png.style[transform] = "skewX(" + (angleDeg) + "deg) translateY(10px)";
png2.style[transform] = "skewX(" + (-angleDeg) + "deg) translateY(10px)";
png.style[transform] = "skewX(" + (angleDeg) + "deg) translateY(150px)";
png2.style[transform] = "skewX(" + (-angleDeg) + "deg) translateY(150px)";
png.style[transform] = "skewX(" + (angleDeg) + "deg) translateY(10px)";
png2.style[transform] = "skewX(" + (-angleDeg) + "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