title: create a 2d array of image pixels using canvas html5
body: <p>hello Guys i was trying to copy an image pixel to a matrix so i can use it later. i was wondering if i was using the matrix in js correctly since i am a begginer thanks<br>
      
      </p>
  
  <pre><code>&lt;canvas id="Canvas" &gt;  
       Navigator doesnt support canvas 
    &lt;/canvas&gt;
        &lt;script type="text/javascript"&gt;
  
  
    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 &lt; canvas.height; y++) {
  
   matrix[y] = [];
  for(var x = 0; x &lt; 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
  }
    }
   &lt;/script&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>