0

I'm having a bit of trouble finding a solution to my problem.
My game involves a timer set for 30 seconds. When the timer is up, the lights go out. When the lights go out, you can see only yourself inside of a little glowing bubble as seen here. enter image description here

This is the character when the lights are on. enter image description here

I recently ran into a problem while making a second, bigger bubble around the candle rather than the player. Currently, I make the little bubble by drawing an image in the middle of 4 black rectangles. Now, this won't work because the two different images would overlap creating a strange looking display.

I was thinking I could clear a circular area out of a different canvas with a black background (one that is not visible) and copy that image over to the original canvas. I tried that and it was very slow.

Does anyone know an efficient way to solve this?

Thank You!

PS: If you want to see the code that I use now, here it is

ctx.fillStyle = "black";
ctx.fillRect(0, 0, cvs.width, cvs.height / 2 - 124);
ctx.fillRect(0, 0, cvs.width / 2 - 125, cvs.height);
ctx.fillRect(0, cvs.height / 2  + 125, cvs.width, cvs.height / 2 - 125);
ctx.fillRect(cvs.width / 2  + 125, 0, cvs.width / 2 - 125, cvs.height);
ctx.drawImage(img.glow, cvs.width / 2 - 125, cvs.height / 2 - 125);
Pizza Scripters
  • 46
  • 6
  • please post related code, preferably in a fiddle – Fabricator Jun 17 '16 at 17:03
  • @Fabricator I would use a fiddle if I could, but the whole thing is an Express JS app containing hundreds of lines of code. – Pizza Scripters Jun 17 '16 at 17:06
  • I think in general if you are layering images with alpha channels, it's going to be a bit slow as it grinds through the calculations. It'd probably be faster if the transparent areas are fully transparent, and those that are opaque are fully opaque. – Hamilton Lucas Jun 17 '16 at 17:20

0 Answers0