fillrect vs putimagedata (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script src="//www.cinsoft.net/mylib099-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<canvas id="canvas" width="50" height="50"></canvas>
<script>
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgba(0, 0, 0, .01)"
  imageData = ctx.createImageData(10, 100);
</script>

Setup

ctx.clearRect(0, 0, 200, 200);

Test runner

Ready to run.

Testing in
TestOps/sec
fillrect
ctx.fillRect(0, 0, 100, 10);
ready
putImageData
ctx.putImageData(imageData, 2, 0);
ready
getImageData
ctx.fillRect(0.5, 0.5, 1, 1);
ready
change fillStyle and fillRect
ctx.fillStyle = '#FFAEF0FF';
ctx.fillRect(0, 0, 1, 1);
ready

Revisions

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