Canvas Pixel Manipulation (v104)

Revision 104 of this benchmark created on

Description

Tests two different methods of manipulating pixels using the canvas.

Preparation HTML

<canvas id="canvas" height="1024" width="1024"></canvas>

Setup

var canvas = document.getElementById('canvas');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    var data = imageData.data;
    var length = data.length;
    
    
    var buf = data.buffer
    var buf8 = new Uint8ClampedArray(buf);
    var data32 = new Uint32Array(buf);

Teardown


    ctx.putImageData(imageData, 0, 0);

Test runner

Ready to run.

Testing in
TestOps/sec
8-bit Pixel Manipulation
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var index = (y * canvasWidth + x) * 4;

    var value = x * y & 0xff;

    data[index] = value; // red
    data[++index] = value; // green
    data[++index] = value; // blue
    data[++index] = 255; // alpha
  }
}
ready
32-bit Pixel Manipulation
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var value = x * y & 0xff;

    data32[y * canvasWidth + x] =
      (255 << 24) | // alpha
    (value << 16) | // blue
    (value << 8) | // green
    value; // red
  }
}
ready
8-bit Pixel Manipulation with read
for (var index = 0; index < length; index += 4) {
  data[index] = data[index] + 1; // red
  data[index + 1] = data[index + 1] + 1; // green
  data[index + 2] = data[index + 2] + 1; // blue
  data[index + 3] = data[index + 3] + 1; // alpha
}
ready
32-bit Pixel Manipulation with read
var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32[index] >> 24) & 0xff;
  b = (data32[index] >> 16) & 0xff;
  g = (data32[index] >> 8) & 0xff;
  r = (data32[index]) & 0xff;
  data32[index] = (((a + 1) & 0xff) << 24) | (((b + 1) & 0xff) << 16) + (((g + 1) & 0xff) << 8) + (((r + 1) & 0xff));
}
ready
32-bit Pixel Manipulation with read ex
var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32[index] >> 24) & 0xff;
  b = (data32[index] >> 16) & 0xff;
  g = (data32[index] >> 8) & 0xff;
  r = (data32[index]) & 0xff;
  a = a + 1;
  r = g + 1;
  g = g + 1;
  b = b + 1;
  data32[index] = (((a) & 0xff) << 24) | (((g) & 0xff) << 16) + (((b + 1) & 0xff) << 8) + (((r) & 0xff));
}
ready
32-bit Pixel Manipulation with read ex inline create view
var bufex = data.buffer;
var data32ex = new Uint32Array(buf);

var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32ex[index] >> 24) & 0xff;
  b = (data32ex[index] >> 16) & 0xff;
  g = (data32ex[index] >> 8) & 0xff;
  r = (data32ex[index]) & 0xff;
  a = a + 1;
  r = g + 1;
  g = g + 1;
  b = b + 1;
  data32ex[index] = (((a) & 0xff) << 24) | (((g) & 0xff) << 16) + (((b + 1) & 0xff) << 8) + (((r) & 0xff));
}
ready

Revisions

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