Canvas Draw Image vs fill rect

JavaScript performance comparison

Revision 5 of this test case created by lump

Info

Compares rendering to an offscreen buffer and drawing the resulting image versus drawing the image from scratch every frame.

Trying to figure out how big the impact is with different number of objects

Preparation code

<canvas id="myCanvas" width="600" height="400">
</canvas>
<script>
  Benchmark.prototype.setup = function() {
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    
    var renderToCanvas = function(width, height, renderFunction) {
        var buffer = document.createElement('canvas');
        buffer.width = width;
        buffer.height = height;
        renderFunction(buffer.getContext('2d'));
        return buffer;
        };
    
    var renderFunc = function(ctx) {
        ctx.fillStyle = '#636363';
        ctx.fillRect(110, 0, 10, 10);
        ctx.fillRect(100, 10, 10, 10);
        ctx.fillRect(90, 20, 10, 10);
        ctx.fillRect(80, 30, 10, 10);
        ctx.fillRect(70, 40, 10, 10);
        ctx.fillRect(60, 50, 10, 10);
        ctx.fillRect(50, 60, 10, 10);
        ctx.fillRect(40, 70, 10, 10);
        ctx.fillRect(30, 80, 10, 10);
        ctx.fillRect(20, 90, 10, 10);
        ctx.fillRect(10, 100, 10, 10);
        ctx.fillRect(0, 110, 10, 10);
        ctx.fillRect(220, 0, 10, 10);
        ctx.fillRect(210, 10, 10, 10);
        ctx.fillRect(200, 20, 10, 10);
        ctx.fillRect(190, 30, 10, 10);
        ctx.fillRect(180, 40, 10, 10);
        ctx.fillRect(170, 50, 10, 10);
        ctx.fillRect(160, 60, 10, 10);
        ctx.fillRect(150, 70, 10, 10);
        ctx.fillRect(140, 80, 10, 10);
        ctx.fillRect(130, 90, 10, 10);
        ctx.fillRect(120, 100, 10, 10);
        };
    
    var offScreenCanvas = renderToCanvas(canvas.width, canvas.height, renderFunc);
    
    ctx.fillStyle = '#FF0000';
  };
</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
Draw Image
 
ctx.drawImage(offScreenCanvas, 0, 0);
 pending…
Fill Rect
 
ctx.fillRect(0, 110, 10, 10);
ctx.fillRect(10, 100, 10, 10);
ctx.fillRect(20, 90, 10, 10);
ctx.fillRect(30, 80, 10, 10);
ctx.fillRect(40, 70, 10, 10);
ctx.fillRect(50, 60, 10, 10);
ctx.fillRect(60, 50, 10, 10);
ctx.fillRect(70, 40, 10, 10);
ctx.fillRect(80, 30, 10, 10);
ctx.fillRect(90, 20, 10, 10);
ctx.fillRect(100, 10, 10, 10);
ctx.fillRect(110, 0, 10, 10);
ctx.fillRect(120, 110, 10, 10);
ctx.fillRect(130, 100, 10, 10);
ctx.fillRect(140, 90, 10, 10);
ctx.fillRect(150, 80, 10, 10);
ctx.fillRect(160, 70, 10, 10);
ctx.fillRect(170, 60, 10, 10);
ctx.fillRect(160, 50, 10, 10);
ctx.fillRect(180, 40, 10, 10);
ctx.fillRect(190, 30, 10, 10);
ctx.fillRect(200, 20, 10, 10);
ctx.fillRect(210, 10, 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