2D canvas opacity
getContext('2d', { alpha: false }) でアルファチャンネルを無効化し、不透明な背景を持つCanvasの描画パフォーマンスを向上させます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_alpha_parameter | 32 | 79 | 30 | | 32 | |
基本構文
JAVASCRIPT
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { alpha: false });
// Setting the background to opaque black speeds up rendering
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);ライブデモ
Why disable alpha
Explain that opaque canvases can reduce compositing work when transparency is not needed.
プレビュー全画面表示
Decision checklist
Choose alpha support based on whether the page relies on transparent pixels.
プレビュー全画面表示
実務での使いどころ
-
2D canvas opacity の活用
Canvas 2Dコンテキストのアルファチャンネル無効化オプション。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。