[Resolved] cocos2d-HTML5 canvas size setting Help!

[Resolved] cocos2d-HTML5 canvas size setting Help!
0.0 0


hello im new to cocos2d. Im using basic coco2d-html built in template, can someone help me how to scale canvas size and background size equals to browser size?


Hi, Shukerullah

You can refer to the sample code in our git repo, in /samples/games, there is some game test case which can show you almost all the basics that you need to know.

For example, in /samples/games/MoonWarriors/main.js, which contains the game’s CCApplication implementation, you can find the code you need in the function “applicationDidFinishLaunching”


For more details, check out http://www.cocos2d-x.org/wiki/Cocos2d-html5

Hopes that helps



Thank you very much Haubin :slight_smile: i will try it, hope this will work for me


now i can change width and heigt of canvas, but how to scale sprite? :slight_smile:


Can you show us a screen caption?


this.sprite = cc.Sprite.create(s_HelloWorld);
this.sprite.setAnchorPoint(cc.p(0.5, 0.5));
this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
this.addChild(this.sprite, 0);

*size is window’s size.
how can i scale spirte’s width equals to window’s width and spirte’s height equals to window’s height? Thanks


You don’t really need to do all this

You just need to setup your game’s designed resolution and the adaptation policy, cocos2d will do all the work for you. In the code, you always work with your designed resolution.
For example, you have a game to be designed with 480 * 360 as resolution, and you want a background sprite which show full screen,
Firstly, you need to setup your designed resolution and the adaptation policy in the “applicationDidFinishLaunching” function:

cc.EGLView.getInstance()._adjustSizeToBrowser(); cc.EGLView.getInstance().adjustViewPort(true); cc.EGLView.getInstance().setDesignResolutionSize(480, 360, cc.RESOLUTION_POLICY.SHOW_ALL);

cc.RESOLUTION_POLICY.SHOW_ALL is the adaptation policy which means you want your game to be always scaled to the screen size and keep the width / height ratio.
Then you need to write your sprite like this way.

this.sprite = cc.Sprite.create(s_HelloWorld); this.sprite.setAnchorPoint(cc.p(0.5, 0.5)); this.sprite.setPosition(cc.p(480 / 2, 360 / 2)); this.addChild(this.sprite);

You see, you don’t need to know the screen size or the navigator size, what’s important is the resolution you designed.
Then in your game, this Hello world sprite will be automatically scaled.

This is just a brief talk about how you can achieve this, you probably need to read more in this article: http://www.cocos2d-x.org/wiki/Detailed_explanation_of_Cocos2d-x_Multi-resolution_adaptation


thankyouuu sirr :slight_smile:



i want to scale my sprite size equals to browser size


Hi, Please check out our API documentation of CCSprite here: http://www.cocos2d-x.org/reference/html5-js/V2.2.1/index.html

The hint is that you can simple use sprite.setScale(scaleX, scaleY), and the scale ratio can be calculated with your sprite size sprite.getContentSize() and the window size



It is simple to make the game scale up, but I have a request to scale the game down to a fixed size smaller than the designed size. Can you describe the correct way with 2.2.1? I have scaled it smaller, but it does not do so in proper proportions when playing the game.

Thank you,


Hi, Sean

The proper way is to use resolution policy.
You can wrap your canvas into a div which you can control its size and position precisly. Then apply the resolution policy to your cocos2d EGLView then it will work correctly.

The link of the documentation: http://www.cocos2d-x.org/wiki/Understand_the_Resolution_Policy_in_Cocos2d-html5_222
Check out the notion of frame.



Thank you Haubin. Is there a way to do this with 2.2.1? Or is it a requirement to upgrade the engine for this feature?


We also support resolution policy in 2.2.1, even if there may be some small bugs, you can still give it a try. (Watch well the console for possible errors.)