Pixel Pre-rendering (v2)

Revision 2 of this benchmark created on

Description

Using pre-rendering to optimize pixel-based Canvas operations.

Preparation HTML

<canvas id="canvas" width="100" height="100">
</canvas>
<script>
  canvas = document.getElementById("canvas");
  var SCREEN_WIDTH = canvas.width;
  var SCREEN_HEIGHT = canvas.height;
  
  context = canvas.getContext("2d");
  image = context.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  imageData = context.createImageData(SCREEN_WIDTH, SCREEN_HEIGHT);
  
  var r = 100;
  var g = 50;
  var b = 60;
  var a = 100;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
direct manipulation
var pixels = SCREEN_WIDTH * SCREEN_HEIGHT;
var i = 4 * pixels + 3;
while (i >= 0) {
  image.data[i--] = Math.random() * 255;
}
context.putImageData(image, 0, 0);
ready
pre-rendering
var pixels = SCREEN_WIDTH * SCREEN_HEIGHT;
var imageData = image.data;
var i = 4 * pixels + 3;
while (i >= 0) {
  imageData[i--] = Math.random() * 255;
}
context.putImageData(image, 0, 0);
ready

Revisions

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