title: HTML5 Canvas flip vertical function works in Firefox but not Chrome or Safari. why?
body: <p>Here is the code that works perfectly well in Firefox, but I just do not get why it does not work in Webkit browsers! Note: Im using jQuery to select the canvas element.</p>
  
  <pre><code>    (function()
      {
          flipV=function(imageData)
          {
              var n = new Array();
              var d = imageData.data;
          // loop through over row of pixels
              for (var row=0;row&lt;imageData.height;row++)
              {
              // loop over every column
                  for (var col=0;col&lt;imageData.width;col++)
                  {
                      var si,di,sp,dp;
  
                  // source pixel
                      sp=(imageData.width*row)+col; 
  
                  // destination pixel
                  dp=(imageData.width*((imageData.height-1)-row))+col; 
  
                  // source and destination indexes, will always reference the red pixel
                  si=sp*4;
                      di=dp*4;
  
                      n[di]=d[si]; // red
                      n[di+1]=d[si+1]; // green
                      n[di+2]=d[si+2]; // blue
                      n[di+3]=d[si+3]; // alpha
                  }
              }
              imageData.data=n;
  
              return imageData;
          };
  
          var imgs = ['/images/myimage.png'];
  
          var $c=$('#canvas');
          var cxt=$c[0].getContext('2d');
  
  
          var w=$c.width();
          var h=$c.height();
  
          var img1 = new Image();
          img1.onload=function()
          {   
              cxt.drawImage(img1,0,0,img1.width,img1.height,0,0,w,h);
              imageData = flipV(cxt.getImageData(0,0,w,h));
              cxt.putImageData(imageData,0,0)
  
          };
          img1.src=imgs[0];
  
      }
  )();
  </code></pre>