Run results for: Uint8Array vs Uint8ClampedArray 4 value copy ImageData 5

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
ImageData	428.4 Ops/sec
Uint8ClampedArray	1229222.8 Ops/sec

Script Preparation code:

var imageWidth = 50;
var imageHeight = 50;
var testElements = [];
var testImages = [];
for (let i = 0; i < 500; i++) {
  let element = document.createElement('canvas');
  element.width = imageWidth;
  element.height = imageHeight;
  element.style.width = imageWidth + 'px';
  element.style.height = imageHeight + 'px';
  testElements.push(element);
  var context = testElements[i].getContext("2d");
  testImages.push(context.getImageData(0, 0, imageWidth, imageHeight));
}

var imageData = new ImageData(imageWidth, imageHeight);

var weightNegativeThreshold = 0.04;
var weightPositiveThreshold = 0.96;
var pixelStride = 4;
var rowStride = imageWidth * pixelStride;
var pixelArrayLength = imageWidth * imageHeight * pixelStride;

Pseudo = {
    initialRandomSeed: 49734321,
    randomSeed: 49734321,

    resetRandomSeed: function()
    {
        Pseudo.randomSeed = Pseudo.initialRandomSeed;
    },

    random: function()
    {
        var randomSeed = Pseudo.randomSeed;
        randomSeed = ((randomSeed + 0x7ed55d16) + (randomSeed << 12))  & 0xffffffff;
        randomSeed = ((randomSeed ^ 0xc761c23c) ^ (randomSeed >>> 19)) & 0xffffffff;
        randomSeed = ((randomSeed + 0x165667b1) + (randomSeed << 5))   & 0xffffffff;
        randomSeed = ((randomSeed + 0xd3a2646c) ^ (randomSeed << 9))   & 0xffffffff;
        randomSeed = ((randomSeed + 0xfd7046c5) + (randomSeed << 3))   & 0xffffffff;
        randomSeed = ((randomSeed ^ 0xb55a4f09) ^ (randomSeed >>> 16)) & 0xffffffff;
        Pseudo.randomSeed = randomSeed;
        return (randomSeed & 0xfffffff) / 0x10000000;
    }
};

function _getRandomNeighboringPixelIndex(pixelIdx, pixelArrayLength)
{
  var xOffset = Math.floor((Pseudo.random() - weightNegativeThreshold) / (weightPositiveThreshold - weightNegativeThreshold));
  var yOffset = Math.floor((Pseudo.random() - weightNegativeThreshold) / (weightPositiveThreshold - weightNegativeThreshold));
  return (pixelIdx + pixelStride * xOffset + rowStride * yOffset) % pixelArrayLength;
}

Tests:

ImageData
for(let j = 0; j < 500; j++) { //var context = testElements[j].getContext("2d"); //var imageData = context.getImageData(0, 0, imageWidth, imageHeight); var imageData = testImages[i]; for(let i = 0; i < pixelArrayLength; i += pixelStride) { let neighborPixelIndex = _getRandomNeighboringPixelIndex(i, pixelArrayLength); imageData.data[i] = imageData.data[neighborPixelIndex]; imageData.data[i+1] = imageData.data[neighborPixelIndex+1]; imageData.data[i+2] = imageData.data[neighborPixelIndex+2]; imageData.data[i+3] = imageData.data[neighborPixelIndex+3]; } //context.putImageData(imageData, 0, 0); }
Uint8ClampedArray
{}