Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently

Forum|Forum|2 years ago
February 22, 2023
返信数 2.
13025 ビュー

Hi

I have created a diagram with boxes that can be open on click on top, and so on. I have used only 2D pictures and drawings.

I get always this message: Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

I removed all my code and still the save message. so it is not in the code.

At the same time, I see in performance that the CPU usage is 100% all the time. It looks like is refreshing the pictures all the time.

Anyone knows why I get this and how to solve it?

Thank you

Ramón

このトピックへの返信は締め切られました。

解決に役立った回答 kglad

you can ignore that because it's probably from a browser extension. or use a different browser to test.

chespio

Inspiring

Hi Ramón!
How are you amigo?

I got the same Warning message on Chrome, and looking for a clue, I get this is a recommendation to reduce resource consumption but the function is not in your code, is part of javascript Library Adobe Animate used to load the images (and almost anything else on Canvas) "createjs.min.js"
I investigate the recommendation by downloading the library and adding the { willReadFrequently: true } and no big changes result from this change on my project.

L

LeeBow

Known Participant

Hi chespio,

Can you say where you added the willReadFrequently: true in the createjs.js file?

Thank you

chespio

Inspiring

oh man, thank you so much, your question makes me re-think this issue, and give it a new try, and solve a problem of resources on Chrome for my project.

You need to download and link local the create.js library

finde the lines containing:

canvas.getContext("2d");

replace with:

canvas.getContext("2d", { willReadFrequently: true });

found about 12 times,

in the HTML I've also added on init function:

function init() {
	
	canvas = document.getElementById("canvas");
	canvas.getContext('2d', { willReadFrequently: true });
	
	anim_container = document.getElementById("animation_container");

I get way better performance on chrome by doing this.