Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

2D canvas opacity

2D canvas の getContext() メソッドのオプションの alpha パラメーターは、キャンバスがアルファ透明度チャネルを持つかどうかを設定します。false に設定すると、ブラウザーは不透明なキャンバスの合成を最適化できます。

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
getContext (2d context options alpha parameter)
32
79
30
32
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

  • 2D canvas opacity の活用

    2D canvas の getContext() メソッドのオプションの alpha パラメーターは、キャンバスがアルファ透明度チャネルを持つかどうかを設定します。false に設定すると、ブラウザーは不透明なキャンバスの合成を最適化できます。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク