title: Canvas image become distorted after slice and shrink in iOS Safari
body: <p>I try to load some big sprite images (1998x800), then slice it to single image and draw the image on Canvas, and try to switch these images by mouse or button action.</p>
  
  <p>But I found when I shrink image and switch to the other image, the image will become distorted in iOS Safari. I try the sample on iPad1(iOS 5.1.1) and iPhone4(iOS 6.1), the problem both occurs.</p>
  
  <p>Is it the bug of Mobile Safari? Is any solution?</p>
  
  <p>Draw method:  </p>
  
  <pre><code>    cont.drawImage(currentImg, 0, 0, 666, 800, 0, 0, drawWidth, drawHeight);
  </code></pre>
  
  <p>Sample Link:
  <a href="http://jsfiddle.net/v5uuL/" rel="nofollow">http://jsfiddle.net/v5uuL/</a></p>
  
  <p>Step:<br>
  1. Click 'Smaller' button to shrink image.<br>
  2. Click 'Part 2' button to draw second sprite image on canvas.<br>
  3. Th image which is drawn on canvas become distorted.  </p>
  
  <p>Note that:<br>
  * The size of sprite image is 1998 * 800, and each sprite image includes three images.So the size of those single image in sprite image is 666 * 800.<br>
  * If you click 'Bigger' button, then click 'Smaller' button, the problem will not happen.   </p>
  
  <p>Screenshot:<br>
  <a href="http://i.imgur.com/I1bxMst.png" rel="nofollow">http://i.imgur.com/I1bxMst.png</a> (normal)<br>
  <a href="http://i.imgur.com/QuztC4v.png" rel="nofollow">http://i.imgur.com/QuztC4v.png</a> (distorted - the second sprite image)</p>