Getting the canvas to be transparent

Question

So I found a wave style I liked on codepen. I'm not gonna go through design my own I want to focus on the backend of my website rather then UI. But still want stunning UI. Anyways I want to know if anyone would know how to make the canvas so that it is transparent.

I have an app that I've created its a simple splash page. I just want to make it so when a user presses more info the wave moves up and allows the user to accept terms of use...

Here is a link to the code pen:

https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac

/*========================================
   Wave
   ========================================*/

$.wave = function (color, amp, height, comp) {
  $.ctx.beginPath();

  var sway = $.simplex.noise2D($.goff, 0) * amp;

  for (var i = 0; i <= $.count; i++) {
    $.xoff += $.xinc;

    var x = $.cx - $.length / 2 + $.length / $.count * i,
    y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;

    $.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
  }

  $.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
  $.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
  $.ctx.closePath();
  $.ctx.fillStyle = color;

  if (comp) {
    $.ctx.globalCompositeOperation = comp;
  }

  $.ctx.fill();
};

Again I'm looking for how to get the canvas to display what ever is behind it. The rest is straight forward.

Possible duplicate of [How do I make a transparent canvas in html5?](https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5) — David784, Jan 19 '19 at 03:28
If I comment `//$.ctx.fillStyle = "#182645";` in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't. — David784, Jan 19 '19 at 03:43
@David784 yes but I only need the white part to be transparent — RTarson, Jan 19 '19 at 04:25

score 0 · Answer 1 · answered Jan 19 '19 at 04:19

Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.

All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.

If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.

Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".

Getting the canvas to be transparent

1 Answers1