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

[ramóngarcía]

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 · Accepted solution]

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

[chespio]

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. 

[LeeBow]

Hi chespio,

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

Thank you

[chespio]

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.