I'm new to Cocos2D-HTML5 (and HTML5 itself) and I'm trying to get the canvas to be the full size of the page. I'm confused by how few issues are documented about this on the internet, so I hope it's actually really simple.

The problem is that the <canvas> element doesn't accept width="100%" or height="100%", but only pixels (but then it won't stretch to fit the window).

I have also tried solutions as described here (css as well as javascript), but it seems that Cocos2D resizes the canvas to fit the width and height properties nonetheless, and if omitted, uses a default size of 300 x 150 px (without Cocos2D I do get a full-page canvas).

How can I change the canvas size to fit the page in Cocos2D itself?

I'm new to Cocos2D-HTML5 (and HTML5 itself) and I'm trying to get the canvas to be the full size of the page. I'm confused by how few issues are documented about this on the internet, so I hope it's actually really simple.

The problem is that the <canvas> element doesn't accept width="100%" or height="100%", but only pixels (but then it won't stretch to fit the window).

I have also tried solutions as described here (css as well as javascript), but it seems that Cocos2D resizes the canvas to fit the width and height properties nonetheless, and if omitted, uses a default size of 300 x 150 px (without Cocos2D I do get a full-page canvas).

How can I change the canvas size to fit the page in Cocos2D itself?

• javascript
• html
• canvas
• cocos2d-iphone
• cocos2d-html5

2 Answers 2

source

HTML:

<canvas id="canvas"></canvas>

JavaScript:

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

CSS:

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */

It set's in /main.js. Default size :

var resourceSize = cc.size(480, 800);
var designSize = cc.size(480, 800);
director.setContentScaleFactor(resourceSize.width / designSize.width);
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

Full page size:

var screenSize = cc.EGLView.getInstance().getFrameSize();
cc.EGLView.getInstance().setDesignResolutionSize(screenSize.width, screenSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);