Simple alpha compositing

図形が描画されると、描画された領域は図形要素により指定された色とキャンバスの色(既に描かれている図形によって着色された色)とを混ぜた色になります。

図形要素の色とキャンバスの色を混ぜた色は以下の式で求められます。

Er, Eg, Eb - 図形要素の色(順に赤、緑、青の値)
Ea - 図形の要素の不透明度
Cr, Cg, Cb - キャンバスの色(順に赤、緑、青の値)
Ca - キャンバスの不透明度
Cr', Cg', Cb' - 図形要素の色とキャンバスの色を混ぜた色(順に赤、緑、青の値)
Ca' - 図形要素の色とキャンバスの色を混ぜた不透明度

Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

例えば、
rgb(100,100,100)、不透明度1で着色されている領域に、
<rect width="10" height="10" fill="#0f0000" fill-opacity="0.5"/>
で表される矩形が描かれた場合、矩形の領域の色は、
Er = 127
Eg = 0
Eb = 0
Ea = 0.5
Cr = 100
Cg = 100
Cb = 100
Ca = 1

Ca' = 1 - (1 - 0.5) * (1 - 1) = 1
Cr' = (1 - 0.5) * 100 + 127 = 177
Cg' = (1 - 0.5) * 100 + 0 = 50
Cb' = (1 - 0.5) * 100 + 0 = 50
のように求められ、rgb(177,50,50)、不透明度1となります。