Retina on OS X and iOS

[skelly]

Canvas rendering on Retina iOS screens is wonky. The PFD looks pixel-doubled while regular HTML text looks ok.

[wiseman]

Sorry, I don't have a Retina display iOS device, so fixing this might take a while.

[pchickey]

Not a huge deal- this is definitely in the enhancement category, not a bug.
Ill take a look as I get some time over the holidays.

On Dec 14, 2012, at 5:44 PM, John Wiseman [email protected] wrote:

Sorry, I don't have a Retina display iOS device, so fixing this might take
a while.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/11#issuecomment-11398471.

[wiseman]

This looks like it might be helpful: http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

Also I tried to reproduce using the XCode iPhone simulator in Retina mode, but I'm not sure if it worked. Can someone post a screenshot showing the problem?

[dccourt]

Looks OK to me on iPhone 5 right now - see attached.

[pchickey]

To my eyes the bug is still there - compare the fuzzy "20" on the left and
right PFD tapes to the sharp "20 m" at the guide altitude slider. The PFD
tape text is part of a canvas which is expanded to double size in pixels,
whereas the "20 m" is just normal HTML text.

This isn't a high priority bug, by any means - just a "nice to have"
feature.

On Sat, Feb 23, 2013 at 3:27 PM, David Court [email protected]:

Looks OK to me on iPhone 5 right now - see attached.
[image: photo]https://f.cloud.github.com/assets/1383539/188811/a07c1aa6-7e10-11e2-86f4-e2ef063ef145.PNG

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-14000259.

[HowlingEverett]

The reason this happens is because of the way Webkit renders the canvas on retina devices. On a retina device, the canvas is actually four times the pixels, but the backing store (the offscreen context in which you draw your content) is still in old-style physical pixels. Webkit scales up that content in the backing store before drawing - which is where the blurriness comes from.

Just a heads up with some context: what you want to investigate is webkit's window.devicePixelRatio property. Basically, Webkit can report whether it's got a standard 1:1 pixel ratio or a 2:1 pixel ratio (retina). If you get a devicePixelRatio of 2, you know you're on a retina device and can respond accordingly.

Unfortunately, how to deal with it is mostly a hack right now. When you get a devicePixelRatio of 2, but a webkitBackingStorePixelRatio property of 1, you essentially have to double the dimensions of the canvas (i.e. a 640_480 canvas becomes 1280_960), and then scale the element back down after rendering with CSS. Not elegant, but it works.

The most annoying thing is that Safari 6 was the one browser that handled this properly: it double the backing store automatically on retina devices. Chrome/Firefox/Mobile Safari didn't. And as of Safari 7, neither does Safari :/

[heavybx23]

Cool⚡️