Web Desktop, display in fullscreen

Web Desktop, display in fullscreen

Hello, I want the canvas of the game to be displayed in fullscreen, I try everything and it does not work.

-Changing the size of the canvas dynamically
-Change the display mode with:

cc.view.setDesignResolutionSize(window.innerWidth, window.innerHeight, cc.ResolutionPolicy.EXACT_FIT);

In the best case it shifted the camera, and in the worst it changed nothing.

Can you give me a step by step method please ?


have you tried cc.screen.requestFullScreen()?

1 Like

what about this

            // Exit full screen
        } else{
            cc.screen['requestFullScreen'](document.getElementById('idOfCanvasParent'), () => {
                // Full screen completed
1 Like

Yes I tried, but it didn’t change anything


Hm, I’m using that code and it works perfect for me.
Are you correctly calling the right document element?
By default I think is ‘Cocos2dGameContainer’.

1 Like

are you calling cc.screen.requestFullScreen() on user gesture? like click events

1 Like

davidbm: It may be the problem, in which file should I put it exactly?
smellypotato: I tried in the update function.


you can not call that in update. try to use it as a click event of a button


As smelly said, just put that code in the onclick event of a button.


Yes, but the probleme is that it’s very pixelated.
And I want the game to be in fullscreen all the time, as for an io game.

(Example: https://zombsroyale.io/ )

I’m starting to doubt Cocos Creator about it.


What do you mean about “it’s very pixelated”? and “I want the game to be in fullscreen all the time”?
As I said, I’m actually using the code I posted and for me it’s working perfectly fine.
What do you get when you use it?

1 Like

“it’s very pixelated” -> When the game goes full screen, it’s just a zoom, and there are big pixels.
In addition, it prevents the smooth running of the game, I put it online to better understand: https://testshare53.000webhostapp.com/ (Web Desktop only)

“I want the game to be in fullscreen all the time” -> I would like the game to be in full screen without user intervention, but I think it is sufficient to run the button code at the beginning.

So yes it works, but not correctly.


Hm, have you tried to build using Web Mobile instead of Web Desktop?

1 Like

But what if I want a desktop web game?
Build using Web Mobile will change something?


“The major difference is that in Web Mobile , the image will cover the whole browser window by default, while in Web Desktop ,you are allowed to designate the resolution of image, which doesn’t change when you zoom on the browser window.”

1 Like

Due to security consideration, fullscreen event must be activated by user gesture, otherwise websites can block user activity by always showing fullscreen. You can do nothing about that, but you can ask the user to change to fullscreen, then run the game if it is in full screen


Thank you !
But as you can see: https://testshare53.000webhostapp.com/
The camera is not centered, and the arrow does not follow the cursor, I deduce that it is related to the size of Canvas, but I’m not sure.
Yet the camera script should work:

 update (dt) {
        this.node.x = this.target.node.x - cc.view.getFrameSize().width/2;
        this.node.y = this.target.node.y - cc.view.getFrameSize().height/2;
       //Target = the arrow


How to fix the problem?

I was talking about a full screen compared to the page, but thank you for teaching me that!


Have both nodes (camera and target) the same parent?
Also I think you should not use getframesize() instead try with cc.win.Size

1 Like

I just change by cc.win.Size (I noticed that it returns the canvas’ size), and it seems to work, I used the same thing for the direction of the arrow, and it works too.
By the way, both nodes don’t have the same parent.

Thank you so much ! :smile:

1 Like

Then keep in mind that when you get the position of a node you get the LOCAL position of that node.

1 Like