Fuzzy canvas due to devicePixelRatio not taken into account

[rohde]

Hey fellow Pixies,
I have blurring issues with my Pixi stuff. At first I thought that this was somehow a Pixi issue (core issue, or me using it wrong).
Then I found out this is a general issue with canvas and devicePixelRatio.

http://www.html5rocks.com/en/tutorials/canvas/hidpi/
http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

I made a small repro myself:

http://openspace.subsero.dk/subsero/rohde/pixi_blurring_repro_2/

It shows:
1./ The raw button img tags as shown and scaled by the "normal browser renderengine".
2./ A Pixi playground with the native and retina versions of the image (both blurry).
3./ A normal canvas render (also blurry)
4./ A normal canvas render with the CSS scale method used (sharp)

I'm considering rolling my own Pixi modification for this. But I prefer not too, since my understanding of Pixi and gfx stuff limits me to brute hacks.
Does anyone know if a solution for this is already available somewhere, or perhaps it is already possible with Pixi in some way that I just haven't spotted yet?

I found this post that describes the same issue:

http://www.html5gamedevs.com/topic/15406-game-blurred-in-a-retina-ipad/?hl=blurry#entry87308

As the asker also found renderer.context.setTransform(ratio, 0, 0, ratio, 0 ,0); does not seem to make any difference. If I use "resolution: ratio" when initializing the renderer, everything becomes bigger (so that would need to be combined with the CSS-scaling I guess).

Best regards
Torben Rohde

[ivan.popelyshev]

As far as I know, CSS scale is required in any case. PIXI uses ratio only for some magic with textures.

 

1) write game for regular screen

2) add resolution parameter to renderer, add css scale

3) add @2x textures

Voila!