0

Already looked here-- LINK

I'm trying to get the black background on my canvas to be semi-transparent, but this attempt --

context.fillStyle = "rgba(0, 0, 200, 0.5)";

-- didn't seem to change anything.

Play with my codepen!

Community
  • 1
  • 1
Carey
  • 5
  • 2

1 Answers1

0

It looks like your css rule #canvas is not getting applied. In your javascript, you create a tag canvas but don't assign an id to it. Try assigning an id="canvas" and your #canvas { opacity:0.4; } will get applied.

canvas = document.createElement("canvas");
canvas.id="canvas";
gtramontina
  • 1,096
  • 9
  • 10
  • beautiful! any way to make just the black background fade and the blue animated ripples stay at full opacity? – Carey Jun 14 '14 at 05:21
  • So, canvases are transparent by default. If all you want is a faded black background, how about having your canvas wrapped in an element that has `background-color: rgba(0, 0, 0, 0.5)` (or whatever alpha you want) and don't fill your canvas with any color? And then remove the opacity from your `#canvas` – gtramontina Jun 14 '14 at 05:27
  • yes! I was actually trying to hunt down where the canvas background color is set so I can remove that... here's the updated codepen. your suggestion totally worked for the change in opacity! http://codepen.io/livingcanvas/pen/hJtmg – Carey Jun 14 '14 at 05:41
  • Humm, it seems that the whole pixel manipulation is happening in your `loop()` function. I suggest you look deeper into that and figure out where/how the calculation is done so that instead of making the pixel, darker/brighter, you set its alpha channel. Maybe [this](http://tutorials.jenkov.com/html5-canvas/pixels.html) can help you better understand that pixel manipulation function. – gtramontina Jun 14 '14 at 06:01
  • @Carey http://jsfiddle.net/loktar/ZE2rT/ check out line 168. I removed the css opacity, and do the alpha via the pixel buffer. – Loktar Jun 15 '14 at 05:08