javascripthtmlreactjscanvasword-cloud

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

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: enter image description here

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>)
Solution

  • you can try this:

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

    For more information see:

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