title: html color blending composite
body: <p>the title of my question includes the terms &quot;blending&quot; and &quot;composite&quot;, but I don't understand the difference between the two.</p>
  <p>Here are two canvas D and C.</p>
  <ul>
  <li>the rgba of D is:    ( 44  ,   0 , 22 , 0.70 )</li>
  <li>the rgba of C is:   ( 134 ,  55 , 0  , 0.35 )</li>
  <li>the rgba of body is: ( 122 , 200 , 0  ,
  1.00 )</li>
  </ul>
  <p>D is drawn first then C.</p>
  <p>My question is: how is the intersection calculated?</p>
  <p>I think it is <em>SIMILAR</em> with this function :</p>
  <blockquote>
  <p>gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE_MINUS_SRC_ALPHA);<br />
  // color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)<br />
  // color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)</p>
  </blockquote>
  <p>but the color(A) is always equal to 1. For D, C and (D over C)</p>
  <p>So why blendFunc<strong>Separate</strong> since color(A) is always 1 ?</p>
  <p>Using Gimp I noted the color values of the three areas D, C and (D over C)</p>
  <p><a href="https://i.stack.imgur.com/NP3It.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NP3It.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#c {
    position:absolute;
    top:50px;
    left:150px;
    background-color: rgba(134,55,0,0.35);
  }
  #d {
    position:absolute;
    top:0px;
    left:0px;
    background-color: rgba(44,0,22,0.7);
   
  }
  #namec {
    position:absolute;
    top:100px;
    left:350px;
    font-size: xx-large;
    color:white;
  
  }
  #named {
    position:absolute;
    top:50px;
    left:50px;
      font-size: xx-large;
    color:white;
  
   
  }
  body,html {
    background-color: rgb(122,200,0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="d"&gt;&lt;/canvas&gt;
  &lt;canvas id="c"&gt;&lt;/canvas&gt;
  &lt;div id='named'&gt;D&lt;/div&gt;
  &lt;div id='namec'&gt;C&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>