0

As demonstrated in the following jsfiddle, I'm adding an image to a canvas element, and then rotating it around it's center:

http://jsfiddle.net/M7Z5u/6/

On mobile phones (ios, android) the image has jagged edges when rotating (to see the jagged edges in jsfiddle on an iphone you may have to zoom in on the image). This doesn't happen on desktop browsers.

Is there any way to smoothen the edges on mobile devices?

user3243894
  • 1
  • `is it working smoothly for other images??` – ashishmaurya May 11 '14 at 15:37
  • no, it works the same for all images – user3243894 May 11 '14 at 15:44
  • i'd bet it has to do with hiDPI (retina) this article is nice : http://www.html5rocks.com/en/mobile/high-dpi/ in short : to draw in hiDpi, have at hand a twice sized picture that you draw scaled by 0.5. Try this : http://jsfiddle.net/gamealchemist/M7Z5u/7/ (half size, but hopefully no jaggies) – GameAlchemist May 11 '14 at 19:40
  • This answer may help: http://stackoverflow.com/questions/20511028/screen-resolution-on-a-phonegap-app/20511150#20511150 –  May 12 '14 at 00:32
  • @GameAlchemist I think you're right. Viewing OP's fiddle (and your fiddle) produces jaggies on a MBP w/ retina. – Jack May 17 '14 at 21:53

0 Answers0