Edit in JSFiddle

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),

    data = ctx.createImageData(500,400),
    i32 = new Uint32Array(data.data),
    i = i32.length;

// if this code worked, i.length *should* be data.data.length / 4

// this value gets clamped one value at a time to 0xff,
// so instead of rgba(255, 0, 0, 0.5) this code just puts
// 0xff in *every* RGBA pixel byte

var val = 0x80000080;

//set 32 bytes per round
while (i) {
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
    i32[--i] = val;
}

data.data.set(i32);

ctx.putImageData(data, 0, 0);
console.log('done');

<canvas id="canvas" width="500" height="400"></canvas>

body {background:#999;}