Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

slow graphic function canvascontext.createLinearGradient()

  • 11 ответов
  • 1 имеет эту проблему
  • 34 просмотра
  • Последний ответ от frank.schiller

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.

Приложенные скриншоты

Выбранное решение

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.

Прочитайте этот ответ в контексте 👍 0

Все ответы (11)

more options

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

Полезно?

more options

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

Полезно?

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.

Полезно?

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

Полезно?

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.

Полезно?

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.

Полезно?

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>

Изменено cor-el

Полезно?

more options

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

Полезно?

more options

Oh, it was repaired. Thank you very much.

Полезно?

more options

Выбранное решение

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.

Полезно?

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.

Полезно?

Задать вопрос

Для ответа на сообщения вы должны войти в свою учётную запись. Пожалуйста, задайте новый вопрос, если у вас ещё нет учётной записи.