Canvas(図形の合成方法を指定)

globalCompositeOperation

globalCompositeOperation プロパティにて、図形の合成方法を指定

    var canvas = document.getElementById( 'id名' );   // canvas オブジェクト
    /* オブジェクトが存在しない、ブラウザが Canvas 未対応の場合 */
    if ( ! canvas || ! canvas.getContext ) {
        return false;   // 処理を終了
    }
    var ctx = canvas.getContext( '2d' );   // 描画コンテキスト

    // 図形1を描画

    ctx.globalCompositeOperation = 値;   // 図形の合成方法

    // 図形2を描画

source-over(デフォルト)

図形1に、図形2が重る

destination-over

図形2に、図形1が重なる

source-atop

図形1と、図形2の重なった部分

destination-atop

図形2と、図形1の重なった部分

source-in

図形2の重なった部分

destination-in

図形1の重なった部分

source-out

図形2の重ならない部分

destination-out

図形1の重ならない部分

copy

図形2だけ

xor

図形1、図形2の重ならない部分

lighter

図形1と図形2が重り、重なった部分は色が加算される。

加算され #ffffff に達すると透明になる。