title: speed up canvas's getImageData
body: <p>I need to extract chunks of pixels from the canvas and process them. Currently I am calling <code>getImageData</code> multiple times in nested loops.</p>
  
  <pre><code>_getBinaryStringFromCanvas(canvas) {
    let ctx = canvas.getContext('2d')
    let { xMaxBlock, yMaxBlock, blockSize } = this.metrics;
    let results = '';
    for (let y = 0; y &lt; yMaxBlock; y++) {
      for (let x = 0; x &lt; xMaxBlock; x++) {
        let data = ctx.getImageData(x * blockSize, y * blockSize, blockSize, blockSize);
        let digit = this._somehowProcessTheData(data);
        binaryString += digit;
      }
    }
    return binaryString;
  }
  </code></pre>
  
  <p>This is very slow as xMaxBlock and yMaxBlock can be pretty big. Ideally, I would want to do something like this - </p>
  
  <pre><code>_getChunkFromCache(cache, x, y, width, height){
    // need help implementing this function
  }
  
  _getBinaryStringFromCanvas(canvas) {
    let ctx = canvas.getContext('2d')
    let { xMaxBlock, yMaxBlock, blockSize } = this.metrics;
    let results = '';
    let cache = ctx.getImageData(0, 0, xMaxBlock * blockSize, yMaxBlock * blockSize);
    for (let y = 0; y &lt; yMaxBlock; y++) {
      for (let x = 0; x &lt; xMaxBlock; x++) {
        let data = this._getChunkFromCache(cache, x * blockSize, y * blockSize, blockSize, blockSize);
        let digit = this._somehowProcessTheData(data);
        binaryString += digit;
      }
    }
    return binaryString;
  }
  </code></pre>
  
  <p>But I can't seem to comprehend the logic required to address the region specified by x, y, width, height in the flat array returned
  by <code>getImageData</code>.</p>
  
  <p>Any help implementing <code>_getChunkFromCache</code> is highly appreciated.</p>