☑ How to set canvas transparent?

Help & Support
1

Hi,

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 !

2

Pasted image940×328 42.3 KB

or

Pasted image925×193 21.7 KB

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

So, there two methods to make canvas transparent.

One:

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

Two:

  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:

Pasted image945×105 13.6 KB

Hoping this helps.

3

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

4

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

1 Like
5

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.

6

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

7

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

8

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.