Skip to main content
ramóngarcía
ramóngarcía
Participant
Feb 22, 2023 11:07 AM UTC
Answered

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

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

    This topic is closed to new replies. Start a new post to keep the conversation going.
    kglad
    kgladCorrect answer
    Community Expert
    Feb 22, 2023 3:07 PM UTC

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

    View reply

    4 replies

    chespio
    chespio
    Inspiring
    Apr 10, 2023 1:41 PM UTC

    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. 

    Translate
    LeeBow
    Known Participant
    May 2, 2023 1:43 PM UTC

    Hi chespio,

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

    Thank you

    Translate
    chespio
    chespio
    Inspiring
    May 5, 2023 10:25 PM UTC

    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. 

    Translate
    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    Feb 22, 2023 3:07 PM UTC

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

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices