title: How do I split image into pieces
body: <p>I am looking at a way to divide the image into pieces.</p>
  
  <p>The no of pieces that the image can be split into is configurable using tile_height and tile_width.Looking for help.</p>
  
  <p>I would not want any solution with any frameworks. Only using vanilla JavaScript</p>
  
  <p>I tried the below</p>
  
  <pre><code>var _clipX =0;
  var _clipY = _clipX;
  var _clipHeight = IMAGE_HEIGHT/TILE_HEIGHT;
  var _clipWidth = IMAGE_WIDTH/TILE_WIDTH;
  var _nRows = Math.floor(IMAGE_HEIGHT/TILE_HEIGHT);
  var _nColumns = Math.floor(IMAGE_WIDTH/TILE_WIDTH); 
  for(var i=0;i&lt;_nRows;i++){
      for(var j=0;j&lt;_nColumns;j++){
          el.getContext('2d').drawImage(image, _clipX, _clipY, _clipWidth, _clipHeight, _clipX, _clipY,_clipWidth , _clipHeight);
          _clipX = _clipX + _clipWidth;
      }
      _clipX = 0
      _clipY = _clipY + _clipHeight;
  }
  </code></pre>
  
  <p>Below is the JSFiddle for the work</p>
  
  <p><a href="https://jsfiddle.net/raviteja_avvari/a0h3j55t/" rel="nofollow">JSFiddle</a></p>