[Resolved]HTML5 Canvas size in iPad Retina

Hello,

In the current game that I’m developing, we are using a design resolution of 480x320 (Landscape) and using a FIXED_HEIGHT Resolution policy. Im using HDR graphics for the bigger resolutions, but in the iPad4 the graphics are displayed in poor quality since the canvas size instead of being 2048x1536 is 1024x768.
How can I fix this issue and make the canvas size equal to the real size of the device screen? I was using 2.2.1 and now I updated to 2.2.2.

Thanks in advance.

Hi Mauricio

This haven’t been done in the engine yet, but I have found a solution. I will create a issue for this, hope you can wait a little while.:slight_smile:

Huabin

Here is the issue: http://cocos2d-x.org/issues/3659

AND … It has been fixed in this pull request: https://github.com/cocos2d/cocos2d-html5/pull/1477

Hey!, thanks for the quick support. :slight_smile:
I tested and the graphics look fine now. Also I remote debugging using Safari and i can see that the gamecanvas have the right dimensions, but the Cocos2dGameContainer have another dimensions.

Example:

Thats not a problem, but… how can I get the device dimensions ie. 1960x1306, in order to load the HDR graphics on some devices? Using cc.EGLView.getInstance().getFrameSize(); returns the Cocos2dGameContainers dimensions.

Thanks in advance.!

Cheers,
Huabin LING wrote:

AND … It has been fixed in this pull request: https://github.com/cocos2d/cocos2d-html5/pull/1477

Great !

The canvas style size and the container size is the trick to make the retina adaptation work.
For reference of your canvas real size in pixel, you can use cc.Director.getInstance().getWinSizeInPixels(). Otherwise, cc.EGLView.getInstance().getDevicePixelRatio() will give you the retina display pixel ratio, by multiplying it with the frame size, you should get the real size of your canvas also.

Huabin

Thank you Huabin for the answer! :slight_smile: