title: HTML5 context.drawImage() crop is not working after calling context.translate()
body: <p><img src="https://i.stack.imgur.com/HUfk9.png" alt="full image"><img src="https://i.stack.imgur.com/gtBPl.png" alt="10 individual canases that correspond to areas of full image, WHAT I AM TRYING TO DO">> What I want here are 10 canvases, 5 on the top and 5 on the bottom, each with width 17% and height 25.5%, and appropriate spacing between (see bottom image). Each image drawn on a canvas corresponds to the same area of the full image (see top image). This is kind of like a destination-in, but this is really just a crop of the full image onto smaller canvases using context.translate and context.drawImage(). Please see the two lines inside the innermost for loop with comments that deal wtih context.translate and context.drawImage for clue as to what might be going on. </p>
  
  <p>Please see the attached image of what I am trying to achieve with html5 context.translate() and context.drawImage().</p>
  
  <p>Any help greatly appreciated. Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    //get parent's width and height 
   var parent = document.getElementById("parent");
   var parentWidth = parent.offsetWidth;
   var parentHeight = parent.offsetHeight;
   
   //get below canvas
   var belowCanvas = document.getElementById('belowCanvas');
   var belowCtx = belowCanvas.getContext('2d');
   
   //create temporary canvas
   var tmpCanvas = document.createElement('canvas');
   var tmpCtx = tmpCanvas.getContext('2d');
   
   //initialize width and height of temporary canvas and below canvas to equal parent
   tmpCanvas.width = belowCanvas.width = parentWidth;
   tmpCanvas.height = belowCanvas.height = parentHeight;
   
   //draw below canvas in black for visual aid of how things are cropped in above canvases
   belowCtx.rect(0,0,parentWidth,parentHeight);
   belowCtx.fillStyle = 'black';
   belowCtx.fill();
   
   //draw temporary canvas
   var centerX = parentWidth/4;
   var centerY = parentHeight/4;
   var radius = parentHeight/4;
   
   tmpCtx.rect(0,0,parentWidth,parentHeight);
   tmpCtx.fillStyle = 'blue';
   tmpCtx.fill();
   
   tmpCtx.beginPath();
   tmpCtx.arc(centerX, centerY, radius*1.5, 0, 2 * Math.PI, false);
   tmpCtx.fillStyle = 'green';
   tmpCtx.fill();
   tmpCtx.lineWidth = 2
   tmpCtx.strokeStyle = '#003300';
   tmpCtx.stroke();
   
   tmpCtx.beginPath();
   tmpCtx.arc(parentWidth - centerX, centerY, radius*1.5, 0, 2 * Math.PI, false);
   tmpCtx.fillStyle = 'purple';
   tmpCtx.fill();
   tmpCtx.lineWidth = 2
   tmpCtx.strokeStyle = '#003300';
   tmpCtx.stroke();
   
   tmpCtx.beginPath();
   tmpCtx.arc(parentWidth/2, parentHeight/2, radius*2, 0, 2 * Math.PI, false);
   tmpCtx.fillStyle = 'white';
   tmpCtx.fill();
   tmpCtx.lineWidth = 2
   tmpCtx.strokeStyle = '#003300';
   tmpCtx.stroke();
   
   tmpCtx.beginPath();
   tmpCtx.arc(centerX, parentHeight - centerY, radius*1.5, 0, 2 * Math.PI, false);
   tmpCtx.fillStyle = 'red';
   tmpCtx.fill();
   tmpCtx.lineWidth = 2
   tmpCtx.strokeStyle = '#003300';
   tmpCtx.stroke();
   
   tmpCtx.beginPath();
   tmpCtx.arc(parentWidth - centerX, parentHeight - centerY, radius*1.5, 0, 2 * Math.PI, false);
   tmpCtx.fillStyle = 'yellow';
   tmpCtx.fill();
   tmpCtx.lineWidth = 2
   tmpCtx.strokeStyle = '#003300';
   tmpCtx.stroke();
   
   //set spacing between canvases
   var horizontalSpacing = parentWidth*0.025
   var verticalSpacing = parentWidth*0.03
   
   //initialize canvases width and height
   var widthCanvas = parentWidth*0.17;
   var heightCanvas = parentWidth*0.255;
   
   var xStart;
   var yStart = verticalSpacing;
   for(var i=0; i&lt; 2; i++)
   {
    xStart = horizontalSpacing;
    for(var j=0; j &lt; 5; j++)
    {
     //get specific destinationInCanvas by id and its respective context
     var canvas = document.getElementById("canvas" + ((i*5)+j));    
     var ctx = canvas.getContext('2d');
     
     canvas.width = widthCanvas;
     canvas.height = heightCanvas;
     
     /***!!!
     Problem next two lines
     if the next line is commented out, each canvas is drawn, but of course not translated; so you only see last canvas, canvas9
     if the next line is NOT commented out, only canvas0 is drawn and translated, the rest of the canvases 1-9 are not drawn*/
     ctx.translate(xStart, yStart);//comment out this line to see effect
     ctx.drawImage(tmpCanvas, xStart, yStart, widthCanvas, heightCanvas, 0, 0, widthCanvas, heightCanvas);
     
     xStart += (horizontalSpacing + widthCanvas);
    }
    yStart += (verticalSpacing + heightCanvas);
   }
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #parent {
    width: 1000px;
    height: 600px;
   }
  
   #belowCanvas{
    position: absolute;
    z-index:-1;
   }
  
   #canvas0 {
    position: absolute;
    z-index:0;
   }
  
   #canvas1 {
    position: absolute;
    z-index:1;
   }
  
   #canvas2 {
    position: absolute;
    z-index:2;
   }
  
   #canvas3 {
    position: absolute;
    z-index:3;
   }
  
   #canvas4 {
    position: absolute;
    z-index:4;
   }
  
   #canvas5 {
    position: absolute;
    z-index:5;
   }
  
   #canvas6 {
    position: absolute;
    z-index:6;
   }
  
   #canvas7 {
    position: absolute;
    z-index:7;
   }
  
   #canvas8 {
    position: absolute;
    z-index:8;
   }
  
   #canvas9 {
    position: absolute;
    z-index:9;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE HTML&gt;
   &lt;html&gt;
     &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style-test.css"&gt;
     &lt;/head&gt;
     &lt;body&gt;
    &lt;div id="parent"&gt;
     &lt;canvas id="belowCanvas"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas0"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas1"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas2"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas3"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas4"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas5"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas6"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas7"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas8"&gt;&lt;/canvas&gt;
     &lt;canvas id="canvas9"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript" src="script-test.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
   &lt;/html&gt;      </code></pre>
  </div>
  </div>
  </p>