How to set visible size to canvas size

cocos2d-x JavaScript
1

Hi all.
I created a new project in cocos2d-js-v3.6.1 and I wish my game has exact size that the canvas tag in the html page. But the game always has full size of my display (2560 x 1440).

My canvas:

<canvas id="gameCanvas" width="800" height="450"></canvas>

I found parameters full-screen, x5-fullscreen, 360-fullscreen in head tag of my index page, but changing them makes no effect.

I tried to use

cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);

I tried to remove follow lines:

cc.view.adjustViewPort(true);
cc.view.resizeWithBrowserSize(true);

and pass false to these functions

I also tried this:

cc.view.setFrameSize(1334, 750);

I tried some suggestions from similar problems found in this forum, but have no luck yet.

2

I’m getting the frame with resizeWithBrowser(false) and adjustViewPort(true).

3

Thanks for the help, but it didn’t help.

Only one thing helped me - cc.view.setViewPortInPoints(). In this function I can pass size which I want, but I should also pass position of the viewport. But I need to position my canvas as it is - as it has been defined in the html page.
Another problem of setViewPortInPoints is that this function manipulates with coordinates in design resolution space. For example, if I set design resolution to 800 x 600, then viewport configured so:

cc.view.setViewPortInPoints(0, 0, 800, 600)

will fit all screen. But I want to operate in browser’s original coordinate space.

4

So is there any way to use canvas as it described in the html page ? I wish to have my page look like a simple web site with some elements and my game, but all should be aligned and positioned as it described in HTML and CSS stylesheets. I don’t wish to have any changes in the page elements (including the canvas) made by the engine: no changes in size, no changes in position. Is it possible with cocos2d?

5

I found a doc about cocos2d-js multiresolution support:
http://www.cocos2d-x.org/wiki/Multiple_Resolution_Policy_for_Cocos2d-JS
here I found the solution

cc.ContainerStrategy.ORIGINAL_CONTAINER

this strategy make the canvas sized as it is. Next I make a wrapper, do some alignment with CSS and get the expected result.