☑ How to set canvas transparent?


I want to use Transparent Canvas to set a background page.

But I am not using the engine directly and I use editor. I have checked the item Transparent Canvas in project setting and set the camera clear color alpha to 0.

Unfortunately, I still can not see the background page.

And this’s my project: https://playcanvas.com/project/425272/overview/just-rolling

Thank you in advance !


and $('#application-canvas').css('z-index', '10');

So, there two methods to make canvas transparent.


  1. Setting background page position: absolute; .
  2. And add z-index to the canvas.
  3. z-index of background page is smaller than canvas.


  1. No setting position: absolute to background page.
  2. Using width and heigth properties to make the background page fill the window.

If you are going to use method Tow, I suggest to setting background-image to body directly. Something like this:

Hoping this helps.

So @WingUNO is the problem solved now or do you need any help?

Haha, the problem solved. Thank you all the same. :smile:

1 Like

It would be nice if your games could detect desktop and allow them to be played in landscape. Most people don’t realise they have to resize the browser window for the game to be activated.

Hi, will. Thank you for your sincere advice. :grinning: But this game I make only run on mobile.

OK, no problem. But it would be cool to also feature it on the Explore page. :wink: Where do you publish your games?

Yeah, it’s really cool if my games can be listed on the Explore page. However, in China, there’s a social app, WeChat, very popular. So, when publishing, I would like to publish games on it and games can only run on it.