Chrome high cpu use when multiples canvas are running at same time

Question

I’m having a problem here since a couple days ago with Google Chrome. I love pixel art and I'm trying to create a huge animated map using html5.

Everything was ok until I started to use more than 5 or 6 canvas at same time. In Firefox and Internet explorer the map has no problems, but in Chrome the CPU reaches 70% and sometimes even more.

Can you give me some good tips about how solve this kind of issues in Chrome? I've been searching on Internet about improve performance in Chrome but nothing is helping me.

Thanks for your help.

Just for reference this is the map: http://pixelslivewallpaper.github.io/jadsdsengine/Zelda.htm

indeed, you should warn us that there is ~10minutes of load in your question. The result is awesome! Unfortunately, no idea for Chrome frenzy — nicolallias, Feb 11 '15 at 16:31
Have not look yet at your code, but this might help http://stackoverflow.com/questions/4765600/html5-canvas-animation-uses-88-98-of-cpu — nicolallias, Feb 11 '15 at 16:42
Thanks for the link, believe or not I’m using all those tips and even more. All the canvas are running at 20fps. — Peppermint, Feb 11 '15 at 17:21

score 3 · Answer 1 · edited May 23 '17 at 12:07

Solution:

The easy way to fix this problem is stopping the animation of all the canvas outside the user visible area and resuming them later. The way for calculate this area is capturing the scroll position.

Apparently, Firefox and Internet explorer are doing this job automatically, but in Google Chrome you need do it manually.

Here is the code:

this.loadIsVisibleOptions = function () {
    if (this.stopAnimationWhenIsNotVisible) {
        window.addEventListener("scroll", function (event) { currentJadsdsEngine.isVisible(document.getElementById(canvasID), currentJadsdsEngine) });
    }
}

this.isVisible = function (element, obj) {
    if (element.offsetWidth === 0 || element.offsetHeight === 0) {
        currentJadsdsEngine.stop();
    }
    else {
        var rects = element.getClientRects();
        var result = false;
        var tempClientHeight = document.documentElement.clientHeight;
        var tempClientWidth = document.documentElement.clientWidth;

        for (var i = 0, l = rects.length; i < l; i++) {
            if (rects[i].top + rects[i].height > 0 ? rects[i].top <= tempClientHeight : (rects[i].bottom > 0 && rects[i].bottom <= tempClientHeight) == true) {
                if (rects[i].left + rects[i].width > 0 ? rects[i].left <= tempClientWidth : (rects[i].right > 0 && rects[i].right <= tempClientWidth) == true) {
                    result = true;
                    break;
                }
            }
        }

        if (result) {
            currentJadsdsEngine.resume();
        }
        else {
            currentJadsdsEngine.stop();
        }
    }
}

Inspiration: How do I check if an element is really visible with JavaScript?

Hi Peppermint, could you please remove the solution part from your question and add it to your answer. — bummi, Feb 12 '15 at 23:44

Chrome high cpu use when multiples canvas are running at same time

1 Answers1