JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

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

JavaScript

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);
console.time('32')
var data = new Uint32Array(imageData.data.buffer);
for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var index = (y * canvasWidth + x) 
        data[index]   =  0xff00ffff
    }
}
ctx.putImageData(imageData, 0, 0);
console.timeEnd('32')


console.time('8')

var buf = new ArrayBuffer(imageData.data.length);
var data = new Uint8Array(buf);

for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var index = (y * canvasWidth + x) *4
        data[index]  = 255    // red
        data[++index] = 0
        data[++index] = 255
        data[++index] = 255;      // alpha
    }
}
ctx.putImageData(imageData, 0, 0);

console.timeEnd('8')