Canvasによる合成

icon 項目のみ表示/展開表示の切り替え

Canvasによる合成

Canvasにより描画先に描画するときの描画方法はglobalCompositeOperationプロパティで指定します。
以下に適用例を示します。
四角が描画先にあらかじめ描画されている内容(destination)、円が描画する内容(source)です。
IE11で正常に動作したもののみ図示しています。

globalCompositeOperationプロパティ
source-atop描画先の描画されている領域のみ描画されます。
source-over描画先を上書きします。(初期値)
destination-out描画先が切り取られ透明になります。
destination-over描画先の裏側に描画されます。
lighter描画先とor演算して描画します。
xor描画先と重なっているエリアは透明になります。