Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings

Question

I am using the react-wordcloud package and whenever the size of the container changes it sorts the word cloud to fit the current (70%) screen size.

My console gets spammed by the warning:

I tried to use the package's default settings and I still got this warning.

import ReactWordcloud from "react-wordcloud";
const options = {
    colors: ["#FFF7E5", "#F9D3AB", "#f4cc72", "#ffbe2d", "#ffb100"],
    enableTooltip: false,
    deterministic: true,
    fontFamily: "impact",
    fontSizes: [40, 80],
    fontStyle: "normal",
    fontWeight: "normal",
    padding: 2,
    rotations: 1,
    rotationAngles: [0],
    scale: "sqrt",
    spiral: "archimedean",
    transitionDuration: 1000,
  };
return(<div
   style={{ width: "100%", height: "100%" }}
   >
   <ReactWordcloud options={options} words={props.wordCloud} />
</div>)

Answer 1

Use this:

getContext('2d', { willReadFrequently: true });

For more information see:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

This must be called when you get the context for the first time. Otherwise, the warning will still appear.

Answer 2

It happens to me also. I think it has to do with Dark Reader chrome extension.

The url referenced for the warning: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently