title: Canvas Pixelation - Adjust pixel size
body: <p>I've got a script that cycle's through images. The images start pixelated and then when they are in view, become unpixelated. I achieve that by calling this function <code>x</code> amount of times with <code>requestAnimationFrame</code></p>
  
  <pre><code>Images.prototype.setPixels = function() {
      var sw          = this.imageWidth,
          sh          = this.imageHeight,
          imageData   = this.context.getImageData( 0, 0, sw, sh ),
          data        = imageData.data,
          y, x, n, m;
  
      for ( y = 0; y &lt; sh; y += this.pixelation ) {
          for ( x = 0; x &lt; sw; x += this.pixelation ) {
  
              var red = data[((sw * y) + x) * 4];
              var green = data[((sw * y) + x) * 4 + 1];
              var blue = data[((sw * y) + x) * 4 + 2];
  
              for ( n = 0; n &lt; this.pixelation; n++ ) {
                  for ( m = 0; m &lt; this.pixelation; m++ ) {
                      if ( x + m &lt; sw ) {
                          data[((sw * (y + n)) + (x + m)) * 4] = red;
                          data[((sw * (y + n)) + (x + m)) * 4 + 1] = green;
                          data[((sw * (y + n)) + (x + m)) * 4 + 2] = blue;
                      }
                  }
              }
          }
      }
  
      this.context.putImageData( imageData, 0, 0 );
  }
  </code></pre>
  
  <p><strong>Question: How can I make the individual pixels larger blocks than they are right now.</strong> Right now they are pretty small, and the effect is a little jarring. I'm hoping to fix this by having less pixel blocks on the screen, by making them bigger. </p>
  
  <p>I hope this makes sense, I'm fairly green with canvas, so anything you could do to point me in the right direction would be great!</p>