canvas.drawImage() w/ new Image(), toDataURL() and canvas as arguments (v2)

Revision 2 of this benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/dojo/1/dojo/dojo.xd.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js">
</script>
<script src="//www.cinsoft.net/mylib099-min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js">
</script>
<canvas id="canvas" width="500" height="500">
</canvas>

Setup

var i = 0,
        canvas, image = new Image(),
        toDataUrl = new Image(),
        drawCanvas = document.getElementById('canvas'),
        drawCtx = drawCanvas.getContext('2d'),
        i, size = 32;
    rx = 250, ry = 250, a = 10, t = Math.PI / 64, image.src = "http://c.dryicons.com/images/icon_sets/coquette_part_9_icons_set/png/32x32/speedometer.png";
    
    canvas = document.createElement('canvas'), canvas.width = size;
    canvas.height = size;
    ctx = canvas.getContext('2d');
    ctx.arc(size / 2, size / 2, size, 0, Math.PI * 2, true);
    ctx.globalAlpha = '0.2';
    ctx.fillStyle = "red";
    ctx.fill();
    
    toDataUrl.src = canvas.toDataURL("image/png");

Teardown


    i = 0;
  

Test runner

Ready to run.

Testing in
TestOps/sec
canvas as argument
drawCtx.drawImage(canvas, rx + a * i * t * Math.sin(i * t), ry + a * i * t * Math.cos(i * t));
i++;
ready
toDataURL() as argument
drawCtx.drawImage(toDataUrl, rx + a * i * t * Math.sin(i * t), ry + a * i * t * Math.cos(i * t));
i++;
ready
new Image() as argument
drawCtx.drawImage(image, rx + a * i * t * Math.sin(i * t), ry + a * i * t * Math.cos(i * t));
i++;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.