title: How to convert an image to pixels, edit it, and draw the edited image in Javascript
body: <p>I'm completely new to JS, I want to learn how to do the following:</p>
  
  <p>Get an image data (convert it into an array of pixels so I could edit it) and then return the edited array back from the pixels editing function so that I could use these edited values to draw an edited image. </p>
  
  <p>I'm not even sure if that's the way to go about this, but here's what I got so far:</p>
  
  <pre><code>  var img = new Image();
        img.src = 'img.png';
        var canvas = document.getElementById('canvas');
        var canvasEdited =  document.getElementById('canvasEdited');
        var ctx = canvas.getContext('2d');
        var arr = [];
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
            function editPixels(ctx) {
               for (i of ctx) {
                   // edit pixels values 
                   arr.push(i - 10);    
               }
            }
            console.log(arr);
            function drawEditedImage() {
               var ctxEdited = canvasEdited.getContext('2d');
               ctxEdited.drawImage(img, 0, 0);
            }
       };
  </code></pre>
  
  <p>Console output shows an array with <code>length:0</code>. </p>
  
  <p>Why doesn't it pushes edited pixels to <code>arr</code>?</p>