html color blending composite

the title of my question includes the terms "blending" and "composite", but I don't understand the difference between the two.

Here are two canvas D and C.

• the rgba of D is: ( 44 , 0 , 22 , 0.70 )
• the rgba of C is: ( 134 , 55 , 0 , 0.35 )
• the rgba of body is: ( 122 , 200 , 0 , 1.00 )

D is drawn first then C.

My question is: how is the intersection calculated?

I think it is SIMILAR with this function :

gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE_MINUS_SRC_ALPHA);
// color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
// color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)

but the color(A) is always equal to 1. For D, C and (D over C)

So why blendFuncSeparate since color(A) is always 1 ?

Using Gimp I noted the color values of the three areas D, C and (D over C)

#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);
}

<canvas id="d"></canvas>
<canvas id="c"></canvas>
<div id='named'>D</div>
<div id='namec'>C</div>