Forums » Help » How: Make bkgnd transparent so I can overlay on HTML

I am using Impact to create an interactive experience (not a game) and I want the canvas #div I'm creating to overlay HTML. I want the "game" background to be transparent so I can see to the HTML background.

I'm not up-to-speed on tiling/chunking etc. of the background, and I'm hoping to avoid that for now if there is an easy way to active this.

I've seen suggestions of loading a transparent PNG as a background. Could I somehow make a large completely transparent PNG work for this effect?

I've also seen this suggested. ig.system.clear( 'rgba(0, 0, 0, 0)' );

thanks!

ok as soon as I break down and ask for help I found it.

if anyone else is looking to do this, here is a hack:

system.js line 93

comment out "fillRect" and replace with "clearRect"

//this.context.fillRect( 0, 0, this.realWidth, this.realHeight );
this.context.clearRect(0, 0, this.realWidth, this.realHeight);

I found that performance goes to hell (by about 50-60%) with .clearRect() hacked in like that. It could be specific to my project though. Just thought I'd mention my experience with it.

@Graphikos Yes I was wondering about that. I did see a post from someone who said they had not experienced a major hit. My "game" is not very demanding, hopefully I'm ok.

On the topic of performance, does anyone know if using the BODY background vs. a DIV as my game background matters? I was thinking if I used the HTML BODY background it might be better as I would assume modern browsers might employ a different (faster) drawing technique for artwork that is set as the background.

Also I see a black flash, and the progress bar, upon launching my game, does any know how to disable that?

thanks again.