Added support for high DPI canvasses

[13twelve]

In Chrome/Firefox on a retina Mac Book Pro the icons look fuzzy; added a fix that compares window.devicePixelRatio with context.backingStorePixelRatio to scale the canvas as necessary.

For Safari on high dpi screens nothing happens as it automatically solves the high DPI canvas problem.

[Stichoza]

👍

[felipemarcos]

👍

[SergioCrisostomo]

+1

[jeffehobbs]

👍

[ghost]

Hi all... maybe I'm missing something, but how would built-in support for this work? Why not just make your Canvas bigger (in pixels) and downscale it to the desired size in CSS?

That's how we do it in Forecast.io!

[ghost]

I should perhaps also note that this is a problem that would be fixed by moving to vector Skycons, which is addressed in #11. (It's probably the true right way to handle this!)

[13twelve]

@ironwallaby because each implementation of Skycons would require everyone to do this manually and this update essentially does exactly what you suggest, automatically.

Although I agree #11 would be a better solution :-)

[ghost]

@13twelve I guess this is a stylistic difference: I see it as very scary to mess about with pre-existing HTML and CSS content in JavaScript. To accept this change, I'd probably make the library generate the Canvases directly so it's known ahead of time that they're dynamically generated.

But yeah, why I don't I try to pour that effort into #11 instead :) Then we get a lot of other stuff for free!

[werose]

good

[ghost]

Skycons is no longer maintained; please fork to do any further work on it!