2D canvas opacity

概要

getContext('2d', { alpha: false }) でアルファチャンネルを無効化し、不透明な背景を持つCanvasの描画パフォーマンスを向上させます。

対応ブラウザ

基本構文

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { alpha: false });
// 背景は常に不透明黒になり描画が高速化
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

実務での使いどころ

• 2D canvas opacity の活用

  Canvas 2Dコンテキストのアルファチャンネル無効化オプション。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — 2D canvas opacity