2D canvas opacity
The optional alpha parameter of a 2D canvas's getContext() method sets whether the canvas has an alpha transparency channel. If set to false, then this permits the browser to optimize compositing for an opaque canvas. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The optional alpha parameter of a 2D canvas's getContext() method sets whether the canvas has an alpha transparency channel. If set to false, then this permits the browser to optimize compositing for an opaque canvas. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_alpha_parameter | 32 | 79 | 30 | | 32 | |
Syntax
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);Live demo
Opaque canvas idea
Compare an alpha-enabled canvas with one that can stay fully opaque.
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.
Use cases
Draw custom visuals
Use 2D canvas opacity when browser rendering surfaces need more control for charts, media, or interactive graphics.
Support advanced rendering
Apply 2D canvas opacity where GPU-backed or low-level drawing improves the experience.
Cautions
- Test 2D canvas opacity in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure 2D canvas opacity supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features