Starfield in HTML with transparent background

Question

Hello, I'm trying to get the background of a html5-starfield transparent. I'm not really a coder; but i think it's hard to do.

http://www.chiptune.com/starfield/starfield.html

http://www.thediscopalace.com/testing.php

Using flash can be a solution but this is not allowed because it also must run on the ipad. Can somebody give me some tips ? Or other scripts or ideas where i can have a simular effect for using on thediscopalace.com.

Thanks, Dave

Answer 1

I am not sure and I can't be bothered to test this, but try changing context.fillStyle='rgb(36,14,118)' to context.fillStyle='rgba(0,0,0,0)';

Answer 2

If you look in the source for the page you can see that the canvas tag has a background color set as rgb. Set it to rgba with the final value being 0 and that should work.

I just used Firebug to change body onmousedown function to a different color and changed the canvas rgb to rgba(0, 0, 0, 0) and when you click the page the background color changes.

So I guess add the following to your starfield or canvas css:

background-color: rgba(0, 0, 0, 0);

Hope that helps.

Edit tried it on your page and it didn't work. I guess you changed the Javascript. Saved the page and just changed this line:

context.fillStyle='rgb(36,14,118)';

to

context.fillStyle='rgba(36,14,118, 0)';

As also suggested.