キャンバスを使用して画像ピクセルの2次元配列を作成するhtml5

Question

こんにちは私は後で使用できるように画像ピクセルを行列にコピーしようとしていました。私はJSで行列を使用していた場合、私はbegginer感謝

<canvas id="Canvas" > 
    Navigator doesnt support canvas 
    </canvas> 
     <script type="text/javascript"> 


    var img = new Image(); 

    img.src = "jj.JPG"; // Set source path 

img.onload = function() { 
var matrix = []; 
context.putImageData(idata, 0, 0); 

for(var y = 0; y < canvas.height; y++) { 

matrix[y] = []; 
for(var x = 0; x < canvas.width; x++){ 


var imgd = context.getImageData(x, y, canvas.width, canvas.height); 
var pix = imgd.data; 

var pos = (y * canvas.width + x) * 4; 
    matrix[y][pos]= pix[pos];;  //red  
    matrix[y][pos+1] =pix[pos+1];; //bleu  
    matrix[y][pos+2]= pix[pos+2];; //green  
    matrix[y][pos+3]= 255;   //alpha 
} 
    } 
</script> 

</body> 
</html> 

Answer 1

for(var y = 0; y < canvas.height; y++) {//ligne 
matrix[y] = []; 
for(var x = 0; x < canvas.width; x++){ 
//colonne 

var imgd = context.getImageData(x, y, canvas.width, canvas.height); 
var pix = imgd.data; 


    var pos = (y * canvas.width + x) * 4; // position de pixel 
    matrix[pos]= pix[pos];;   // some R value [0, 255] 
    matrix[pos+1] =pix[pos+1];;   // some G value 
    matrix[pos+2]= pix[pos+2];;   // some B value 
    matrix[pos+3]= 255;   // set alpha channel 
    } 
} 
    return matrix; 

} 

Answer 2

for(var y = 0; y < canvas.height; y++) {//ligne 

for(var x = 0; x < canvas.width; x++){ 
//colonne 

var imgd = context.getImageData(x, y, canvas.width, canvas.height); 

    var pix = imgd.data; 


    var pos = (y * canvas.width + x) * 4; // position de pixel 
    matrix[pos]= pix[pos];;   // some R value [0, 255] 
    matrix[pos+1] =pix[pos+1];;   // some G value 
    matrix[pos+2]= pix[pos+2];;   // some B value 
    matrix[pos+3]= 255;   // set alpha channel 
    } 
    } 
    return matrix; 

}