Vyhľadajte odpoveď

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

slow graphic function canvascontext.createLinearGradient()

more options

Hello together,

when implementing canvas graphics with 2D context, I notified that the latest FF 87.0 on windows is much slower than chrome/edge/opera on windows and also much slower as safari on mac. I drilled into detail and detected that it was caused when drawing polygons with color gradient (see attached image). Means that using canvascontext.createLinearGradient() instead of flat colors makes it slow. On the other hand using flat colors is perfectly fast.

I wondered, because I had much better experience with FF and installed an earlier version (78.9.0esr) on the same windows workstation and the problem was gone. Seams, that some change made the newer FF slower with this type of graphic..

CPU is i7 8650U 1.90 - 2.11 GHZ, OS is Windows 10 version 20H2

But the effect is the same on all windows workstations I tested. Would be happy to see, that I can use FF again with these type of graphic apps.

Priložené obrázky

Vybrané riešenie

OK, my Nightly that I use doesn't show any differences between those two, but I managed to run moz-regression and it really shows a regression. It points to Bug 1547286: Enable remote Canvas 2D in Windows Nightly builds.

So Bug 1548487 - Let remote 2D canvas ride the trains has been fixed in 84, and it confirms your query.

It also shows that this bug is fixed in 89 due Bug 1697344 - GPU acceleration of canvas creates a memory leak that can rapidly crash Firefox.

Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (11)

more options

Hi, can you test this bug using mozregression? Thanks.

Pomohla vám táto odpoveď?

more options

Maybe also test this in the current Nightly build to see if this issue is still present.

Pomohla vám táto odpoveď?

more options

latest nightly build 88.0b8 does not show a better performance. same behaviour. I will have a look onto mozregression.

Thank you so far.

Pomohla vám táto odpoveď?

more options

Hi again,

used mozregression, but this caused some messages by virus protection. This seems to be acceptable, but I simply installed FF versions by downloading historic versions manually. So I found that V83.0 was fast in drawing and V84.0 was much slower which is still the case in the latest version. I have not drilled it down to the exact subversion. I try the next days if that helps.

KInd regards

Pomohla vám táto odpoveď?

more options

So IMHO it could be some edge case of the webrender. Try to set gfx.webrender.force-disabled = true in about:config and restart the browser to confirm it.

Pomohla vám táto odpoveď?

more options

Thank you for the hint. Switched the flag from false to true and restarted FF (Version87). But no effect, was still slow as before. Perhaps I reduce the program to a minimal sample. Some lines should be enough.

Pomohla vám táto odpoveď?

more options

Hope not to bother you, but the when used as index.html the below code shows that the current FF (V87) is several 100 times slower in gradient color fill as other browsers or FF with Version 83 or older. If you switch to flat colors, (which is prepared in code as comment) the problem does not appear.

<!DOCTYPE html>
<html lang="de">
<head>
    <title>dataviewer</title>
</head>
<body>
    <div class="top" id="root"></div>
    <script>

    function redraw(zoom)
    {
        let root = document.getElementById("root");
        canvas   = root.firstChild;
        let width  = window.innerWidth;
        let height = window.innerHeight;
        canvas.width  = width;
        canvas.height = height;
        let ctx = canvas.getContext("2d");
        ctx.fillStyle   = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        let unit = zoom * Math.min(width,height)/100;

        for(let x = 0; x < 50; x++)
        {
            for(let y = 0; y < 50; y++)
            {
                grad = ctx.createLinearGradient(x*unit+x,y*unit+y,x*unit+x+unit,y*unit+y+unit);
                grad.addColorStop(0.0,"#0000ff");
                grad.addColorStop(0.5,"#000040");
                grad.addColorStop(1.0,"#0000ff");
                ctx.fillStyle = grad;     // this is much to slow with current FF
                //ctx.fillStyle = "blue"; // this is as fast as it should be
                ctx.fillRect(x*unit+x,y*unit+y,unit,unit)
            }
        }

        zoom *= 1.05;

        if(zoom > 2.0) zoom = 1.0;

        setTimeout (function() {redraw(zoom);},1);
    }

    let root = document.getElementById("root");
    let canvas = document.createElement("CANVAS");
    root.appendChild(canvas);
    redraw(1.0);

    </script>
</body>
</html>

Upravil(a) cor-el dňa

Pomohla vám táto odpoveď?

more options

Sorry, my comment above was stripped somehow. So its unusable. . Any chance to post a few lines of html & javascript ?

Pomohla vám táto odpoveď?

more options

Oh, it was repaired. Thank you very much.

Pomohla vám táto odpoveď?

more options

Vybrané riešenie

OK, my Nightly that I use doesn't show any differences between those two, but I managed to run moz-regression and it really shows a regression. It points to Bug 1547286: Enable remote Canvas 2D in Windows Nightly builds.

So Bug 1548487 - Let remote 2D canvas ride the trains has been fixed in 84, and it confirms your query.

It also shows that this bug is fixed in 89 due Bug 1697344 - GPU acceleration of canvas creates a memory leak that can rapidly crash Firefox.

Pomohla vám táto odpoveď?

more options

Yes indeed. The version 89.0a1 has a much better performance and is as fast as expected when running the sample above. Thank you very much for your interest and support.

Pomohla vám táto odpoveď?

Položiť otázku

Ak chcete pridať odpoveď, musíte sa prihlásiť k svojmu účtu. Ak účet doteraz nemáte, položte novú otázku.