title: JavaScript canvas image data manipulation
body: <p>I want to resize image using very simple algorithm. I have something like this:</p>
  
  <pre><code>var offtx = document.createElement('canvas').getContext('2d');
  offtx.drawImage(imageSource, offsetX, offsetY, width, height, 0, 0, width, height);
  this.imageData = offtx.getImageData(0, 0, width, height).data;
  offtx.clearRect(0, 0, width, height);
  
  for(var x = 0; x &lt; this.width; ++x)
  {
      for(var y = 0; y &lt; this.height; ++y)
      {
          var i = (y * this.width + x) * 4;
          var r = this.imageData[i ];
          var g = this.imageData[i+1];
          var b = this.imageData[i+2];
          var a = this.imageData[i+3];
          offtx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
          offtx.fillRect(0.5 + (x * this.zoomLevel) | 0, 0.5 + (y*this.zoomLevel) | 0, this.zoomLevel, this.zoomLevel);
      }
  }
  
  this.imageData = offtx.getImageData(0, 0, this.width * this.zoomLevel, this.height * this.zoomLevel);
  </code></pre>
  
  <p>However, the problem I have with this solution, is that the image looses any transparency information that way. I don't know if this happens somewere in this algorithm, or maybe putImageData that I am using later to display that image is doing this, but I can't seem to be able to preserve transparency.</p>
  
  <p>Each time I do this I create a canvas, I put the image on that canvas and use getImageData to get image from that canvas as you can see in the first lines of the code. Maybe there is no other way, so I might not mind that...</p>
  
  <p>But the problem is I use two for loops to draw resized image and then use getImageData to store that image information. This is a wierd way to do it. I would prefer to create empty image data and fill it with all the original image information only resized. I can't grasp that with my mind, I can't image the loop structure for this. To show what I mean:</p>
  
  <pre><code>for(var x = 0; x &lt; this.width; ++x)
  {
      for(var y = 0; y &lt; this.height; ++y)
      {
          var i = (y * this.width + x) * 4;
          var r = this.imageData[i ];
          var g = this.imageData[i+1];
          var b = this.imageData[i+2];
          var a = this.imageData[i+3];
          //I WOULD LIKE MAGIC TO HAPPEN HERE THAT WILL
          //RESIZE THAT CURRENT PIXEL AND MOVE IT TO THE NEW IMAGE DATA RESIZED
          //SO EVERYTHING IS DONE NICE AND CLEAN IN THIS LOOP WITHOUT THE 
          //GETIMAGEDATA LATER AND MAYBE SET TRANSPARENT PIXELS WHILE I'M AT IT
      }
  }
  </code></pre>
  
  <p>I can't figure out the MAGIC part.</p>
  
  <p>Thank you for reading!</p>