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

Benchmark created by van100j on

Preparation HTML

<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.