getImageData

by giacal

HTML

<canvas></canvas>

JavaScript

disegnaBarchetta = function(contesto){
 contesto.beginPath();
 contesto.moveTo(40,170);
 contesto.lineTo(260,170);
 contesto.arcTo(150,250,40,170,150);
 contesto.lineTo(40,170);
 contesto.moveTo(150,170);
 contesto.lineTo(150,40);
 contesto.rect(150,40,60,30);
 contesto.stroke();
 contesto.fill();
}

var cv = document.querySelector('canvas'),
    ct = cv.getContext('2d');

cv.width = 500;
cv.height = 500;

disegnaBarchetta(ct);

var imd = ct.getImageData(0,0,cv.width,cv.height);
    data = imd.data;

for(var x=0; x<data.length; x+=4){
    /*valori da 0 a 255(RGB)*/
    data[x]   = Math.round(Math.random() * 255);
    data[x+1] = Math.round(Math.random() * 255);
    data[x+2] = Math.round(Math.random() * 255);    
}

imd.data = data;
ct.putImageData(imd,0,0);