Architecture-dependent to DataView I have this code here which varies depending on the system architecture (typed arrays depends on endianness). I'm trying to get a 32bit ARGB data array. I was trying to learn DataView, which has a nice way of dealing with "endian-ness".

Can you please help to revise this to use DataView, while working basically as close to the logic as the code below currently follows?

Documentation on DataView: MDN :: DataView

// Getting pixels as a byte (uint8) array
var imageData = ctx.getImageData(0, 0, can.width, can.height);
var pixels8BitsRGBA = imageData.data;

// Reverting bytes from RGBA to ARGB
var pixels8BitsARGB = new Uint8Array(pixels8BitsRGBA.length + 8); // +8 bytes for the two leading 32 bytes integers
for(var i = 0 ; i &lt; pixels8BitsRGBA.length ; i += 4) {
    pixels8BitsARGB[i+8 ] = pixels8BitsRGBA[i+3];
    pixels8BitsARGB[i+9 ] = pixels8BitsRGBA[i  ];
    pixels8BitsARGB[i+10] = pixels8BitsRGBA[i+1];
    pixels8BitsARGB[i+11] = pixels8BitsRGBA[i+2];
}

// Converting array buffer to a uint32 one, and adding leading width and height
var pixelsAs32Bits = new Uint32Array(pixels8BitsARGB.buffer);
pixelsAs32Bits[0] = can.width;
pixelsAs32Bits[1] = can.height;

console.log(pixelsAs32Bits);
Using DataView is pretty much the same thing. Probably slower though. But it allows you to see that you only have to worry about endianness when dealing with values using more than one byte, like you do when storing width and height using 4 unsigned bytes each.

// Getting pixels as a byte (uint8) array
var imageData = ctx.getImageData(0, 0, can.width, can.height);
var pixels8BitsRGBA = imageData.data;

var i;
var pixelsAs32Bits = new Uint32Array(pixels8BitsRGBA.length + 8); // +8 bytes for the two leading UInt32
var pixelsARGB = new DataView(pixelsAs32Bits.buffer);

// Reverting bytes from RGBA to ARGB
pixelsARGB.setUint32(0, can.width, true); // little endian
pixelsARGB.setUint32(4, can.height, true);  // little endian
for(i = 0; i &lt; pixels8BitsRGBA.length ; i += 4) {
    pixelsARGB.setUint8(i + 8, pixels8BitsRGBA[i + 3]);
    pixelsARGB.setUint8(i + 9, pixels8BitsRGBA[i]);
    pixelsARGB.setUint8(i + 10, pixels8BitsRGBA[i + 1]);
    pixelsARGB.setUint8(i + 11, pixels8BitsRGBA[i + 2]);
}

console.log(pixelsAs32Bits);