willReadFrequently
The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback. 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_willReadFrequently_parameter | 99 | 99 | 28 | 18 | 99 | 18 |
Syntax
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.fillRect(0, 0, 100, 100);
const data = ctx.getImageData(0, 0, 100, 100);Live demo
Readback-heavy workload
Show the kind of repeated pixel inspection that motivates willReadFrequently.
When to set the hint
Explain that willReadFrequently is a context creation hint for read-heavy canvas tasks.
Trade-off summary
Remind that a readback hint can change performance characteristics for writes.
Use cases
-
Draw custom visuals
Use willReadFrequently when browser rendering surfaces need more control for charts, media, or interactive graphics.
-
Support advanced rendering
Apply willReadFrequently where GPU-backed or low-level drawing improves the experience.
Cautions
- Test willReadFrequently 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 willReadFrequently supports the intended task without making the page harder to perceive, understand, or operate.