0

It seems like canvas' alpha depends on the CSS Background color (tested on Chrome 60 and Firefox 47).

Case 1: Background: black, canvas: red with 10% alpha

body {background-color: #000000} /* or any other parent DOM element */

Setting Canvas Color to red with 10% alpha

gl_FragColor = vec4(1.0, 0.0, 0.0, 0.1);

has this result:

black background

-> I expect red to be 90% darker

I got the same result after puting alpha to 100%:

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
return;

Case 2: Background: white, canvas: red with 10% alpha

white background

-> it looks correct

Case 3: Background: blue, canvas: red with 10% alpha

blue background

-> it looks like red part is more than 10%

Is there any Color Blending mode, which I'm not aware of?

(These tests were the same on Firefox and Chrome)

Tobias
  • 173
  • 2
  • 10
  • this has been answered many times. I fact the linked answer was on the right "related questions" links – gman Sep 07 '17 at 09:52
  • others: https://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent, https://stackoverflow.com/questions/38636837/math-formula-for-color-and-alpha-in-webgl, https://stackoverflow.com/questions/39341564/webgl-how-to-correctly-blend-alpha-channel-png/, https://stackoverflow.com/questions/29217189/alpha-blending-in-webgl-works-not-correctly, https://stackoverflow.com/questions/35724317/webgl-colors-and-alpha, https://stackoverflow.com/questions/20362023/webgl-why-does-transparent-canvas-show-clearcolor-color-component-when-alpha-is – gman Sep 07 '17 at 09:58
  • cont... https://stackoverflow.com/questions/20362023/webgl-why-does-transparent-canvas-show-clearcolor-color-component-when-alpha-is – gman Sep 07 '17 at 09:59
  • It solves my problem. I'm ashamed to not have found these questions. Thank you for your fast help. You are really everywhere where someone types in "WebGL" :) – Tobias Sep 07 '17 at 10:07
  • Let's blame SO's search :D – gman Sep 07 '17 at 10:34

0 Answers0