game blurred in a retina ipad

[manelis]

Hello,

 

Yesterday I tried for the first time to run my project in a retina ipad, however everything inside the canvas gets completely blurred, even text. Anyone knows what is happening here?

 

First image is on windows chrome with 100% scale, second image is a ipad 3 on safari.

 

 

 

Thank you for the help.

[bQvle]

My guess is that it isn't using the correct pixel ratio for the device.

http://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas

 

You should get the device ratio with this function

var PIXEL_RATIO = (function () {
var ctx = document.createElement("canvas").getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;

return dpr / bsr;
})();

 

 

 

And then apply it to the renderer.context

ratio = PIXEL_RATIO;

renderer.context.setTransform(ratio, 0, 0, ratio, 0 ,0);

[manelis]

That is probably it. I have the canvas always with the size of the window:

      var width = window.innerWidth;      var height = window.innerHeight;      renderer.view.style.width = width + "px";      renderer.view.style.height = height + "px";      renderer.resize(width, height);

So probably that will fix it. Tomorrow I will try it and give back feedback, ty for the help.

[manelis]

Ok ended up doing it now. its works but its not with:

renderer.context.setTransform(ratio, 0, 0, ratio, 0 ,0);

you actually pass the ratio to the renderer initialization:

renderer = PIXI.autoDetectRenderer(400, 300, {antialias: true, transparent: true, resolution: ratio});