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:
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.
ctx.imageSmoothingEnabled = false;