title: Canvas image cropping issue. Is the image too big?
body: <p>Yesterday, I already asked a question about this issue. I had no idea, however, what the problem was. Today I know it is something about the sourceWidth in the drawImage command:</p>
  
  <pre><code>context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
          sourceHeight, destX, destY, destWidth, destHeight);
  </code></pre>
  
  <p>So I've descided to open a new topic and delete the old one.</p>
  
  <p>But let me start at the beginning:
  I'm trying to implement a homemade "zoom function" on a historical document (see image below). It works fine in Firefox, but it does not in any other browser.</p>
  
  <p><a href="http://i.stack.imgur.com/rE9GT.jpg" rel="nofollow">Firefox behaviour</a></p>
  
  <p>In Chrome or Internet Explorer it looks like this. The zoom-area is empty.</p>
  
  <p><a href="http://i.stack.imgur.com/VE0qV.jpg" rel="nofollow">Chrome behaviour</a></p>
  
  <p>An image is displayed, if I just draw it, without any cropping:</p>
  
  <pre><code>context.drawImage(imageObj, 0, 0);
  </code></pre>
  
  <p>But if I try to use the crop function (explained at html5canvastutorials.com) with all needed values (<strong>sourceWidth = 1800</strong>), I cannot see the image in my canvas.
  Interestingly, if I change the <strong>sourceWidth</strong> to a low value like <strong>400</strong> or lower the image is drawn. An <code>imageObj.onload</code> doesn't change anything, as well as the adaption of the <strong>original image size</strong> (e.g. to <em>600x900</em>) or the <strong>width of the canvas</strong>.</p>