New issue
 Projects > js > Issues > Bug #3468

Strange graphical glitches when canvas element is not wrapped in a div

Bug #3468 [Closed]
ZippoLag 2013-12-22 01:06 . Updated about 10 years ago

In the two following links the exact same code is ran, but in one of the html files the canvas element is wrapped in a div and in the other one it isn’t. Watch how when wrapped the canvas remains a fixed size and everything works well inside it, and when unwrapped the canvas takes up all available space but some sprites malfunction and aren’t shown properly:

working_fine.jpg (67.7 kB) ZippoLag, 2013-12-26 05:27

broken_tmx_background.jpg (93.1 kB) ZippoLag, 2013-12-26 05:27

pandamicro 2013-12-25 09:51
  • Status changed from New to Closed
  • % Done changed from 0 to 100

It’s a normal result with our Resolution Policy’s design.
As I found that you used resolution policy in your code:
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

If you used this function, the game canvas will always be resized to fit it’s original container’s size.
In the first wrapped case, it will adapte to your div container which has a initial height of 450px (which is defined by the canvas element, if you don’t precise a div’s height, it will be its children’s height).
In the second case, cocos2d will adapte the canvas size to the body size (which is the browser size), so it has been resized to the browser’s width and its height has been scaled proportionally.

You can refer to this article for more details :\_resolution\_support
It describe the effect of different resolution policies for cocos2d-x. Note that cocos2d-x takes always the screen size for the adaptation, but things are different in HTML5 version. Users may need to show our game only in one div on their page, that’s the origin thought of the design.
In next version 2.2.2, I have refactored the design of Resolution Policy and I’m writing a wiki for it, hopes it will help everyone to understand the mechanism.


pandamicro 2013-12-25 10:11

If you want everything act as the wrapped version, you can simply remove this line of code: cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

ZippoLag 2013-12-26 05:27

That is not what I’m complaining about.

Please look at the broken behaviour I show in the image files I’m attaching now. The tmx I’m using for the background appears broken for no apparent reason.

Thanks for your help, but please don’t close this issue until it’s resolved.

edit: I was sure I attached images to this post but they aren’t showing.. I have uploaded them here, please take a look:

Atom PDF

Start date:2013-12-22
Due date:
% Done:


Target version:-