blendMode()

キャンバスに追加されたときの色のブレンド方法を設定します。

デフォルトでは、ソリッドカラーで描画すると、キャンバス上の現在のピクセル値が上書きされます。 blendMode()は、色をブレンドするための多くのオプションを提供します。

形状、画像、テキストは、キャンバスに描画するためのソースとして使用できます。 ソースピクセルは、描画される場所のキャンバスピクセルの色を変更します。最終的な色は、 ソースピクセルの色とキャンバスピクセルの色をブレンドすることによって得られます。ソースとキャンバスの ピクセルのRGBカラー値は、比較、加算、減算、乗算、除算されて、さまざまな効果を生み出します。赤の値は赤の値と、緑は緑と、青は青と比較されます。

パラメータmodeは、ブレンドモードを設定します。たとえば、blendMode(ADD)を呼び出すと、ブレンドモードがADDに設定されます。次のブレンドモードは、 2DおよびWebGLモードの両方で利用可能です：

• BLEND: ソースからの色値がキャンバスを上書きします。これがデフォルトモードです。
• ADD: ソースからの色値がキャンバスからの値に加算されます。
• DARKEST: もっとも暗い色値を保持します。
• LIGHTEST: もっとも明るい色値を保持します。
• EXCLUSION: DIFFERENCEに似ていますが、コントラストが少なくなります。
• MULTIPLY: ソースからの色値がキャンバスからの値と乗算されます。結果は常に暗くなります。
• SCREEN: すべての色値が反転され、次に乗算され、再び反転されます。結果は常に明るくなります。（MULTIPLYの反対）
• REPLACE: 最後に描画されたソースがキャンバスの残りを完全に置き換えます。
• REMOVE: 重なり合うピクセルは、完全に透明にすることによって削除されます。

次のブレンドモードは、2Dモードでのみ利用可能です：

• DIFFERENCE: ソースからの色値がキャンバスからの値から引かれます。差が負の数の場合は、正の数に変換されます。
• OVERLAY: MULTIPLYとSCREENを組み合わせます。キャンバスの暗い値は暗くなり、明るい値は明るくなります。
• HARD_LIGHT: MULTIPLYとSCREENを組み合わせます。ソースの暗い値は暗くなり、明るい値は明るくなります。
• SOFT_LIGHT: HARD_LIGHTの柔らかいバージョンです。
• DODGE: 明るいトーンを明るくし、コントラストを増加させます。ソースからの反転色値でキャンバスの色値を割ります。
• BURN: 暗いトーンを暗くし、コントラストを増加させます。ソースの色値をキャンバスの反転色値で割り、その結果を反転させます。

次のブレンドモードは、WebGLモードでのみ利用可能です：

• SUBTRACT: ソースからのRGB値がキャンバスからの値から引かれます。差が負の数の場合は、正の数に変換されます。ソースとキャンバスからのアルファ（透明度）値は加算されます。