Сказано было 1024 - сделано было 1024.(32х32)
Возмржность есть, читайте информацию по canvas - там всё элементарно.
Немного упростил:
<body>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.setAttribute('width',332); //задаём ширину
canvas.setAttribute('height',132); //задаём высоту(размер изменяется в данном случае только здесь, потому можете ставить любые значения)
canvas.setAttribute('style', 'float:left');
var div = document.createElement('div');
document.body.appendChild(canvas);
document.body.appendChild(div);
var ctx = canvas.getContext('2d'),
imageData = ctx.createImageData(canvas.width,canvas.height),
data = imageData.data, //массив всех точек изображения r,g,b,a ,r1,g1,b1,a1 ...
l = data.length;
(function randomDraw(){
var i = l, time = Date.now();
while(i--) {
data[i] = Math.floor(Math.random()*256); //по порядку каждому каналу каждой точки изображения ставим произвольное значение 0...255
}
ctx.putImageData(imageData,0,0);
div.innerHTML = 'Скорость отрисовки: ~' + (-time + (time = Date.now())) + 'ms';
setTimeout(randomDraw,50)
}())</script>
</body>
Если вам надо работать с примитивами, а не изображением то лучше не использовать прямую работу с пикселями, т.к. затратно, вместо этого есть встроенные команды рисования canvas.