Dave M Dave M - 3 months ago 21x
iOS Question

IOS HTML5 Canvas Issue on draw / clearRect

I'm using iOS 9.3.2 and having an issue where if I draw an image with a given set of dimensions, then erase that image with the same dimensions (using clearRect), there is a leftover edge of the image. To fix this I was just adjusting the dimensions that I would clear by, which worked until I rotated the phone (which didn't always break it but probably 50% of the time it would break it). Then the edge would come back. This is not a problem in Android on chrome browser, but happens on both safari and chrome on iOS.

Does anyone have any suggestions? I haven't been able to find any existing issues related to this, but if you have any help I would greatly appreciate it! Thanks!


This is almost certainly due to anti-aliasing when drawing the image.

Some things you can do:

  • Always draw images on whole pixel x,y coordinates, maybe use: ctx.drawImage(img, x | 0, y | 0, w, h); Make sure you are clearing in the same space. This may not work well if your currentTransform is not offset by a whole-number amount.
  • Set ctx.imageSmoothingEnabled = false;