Canvas vs Div Background

Benchmark created on

Description

NOTE: this uses the proprietary -webkit-canvas property, so this will only work on safari and chrome.

Preparation HTML

<canvas id="canvas" width="300" height="300">
</canvas>
<div id="div" style="width:300px;height:300px;background:-webkit-canvas('div');">
</div>
<script>
  var canvas_ctx = document.getElementById("canvas").getContext('2d');
  var div_ctx = document.getCSSCanvasContext('2d', 'div', 300, 300);
  
  function draw(ctx) {
    ctx.clearRect(0, 0, 300, 300);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 300, 300);
    ctx.fillStyle = "rgba(100,200,50,0.5)";
    ctx.fillRect(0, 0, 100, 100);
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Canvas Element
draw(canvas_ctx);
ready
Div Background
draw(div_ctx);
ready

Revisions

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