slow graphic function canvascontext.createLinearGradient()
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)
Hi, can you test this bug using mozregression? Thanks.
Maybe also test this in the current Nightly build to see if this issue is still present.
latest nightly build 88.0b8 does not show a better performance. same behaviour. I will have a look onto mozregression.
Thank you so far.
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
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.
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.
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
Sorry, my comment above was stripped somehow. So its unusable. . Any chance to post a few lines of html & javascript ?
Oh, it was repaired. Thank you very much.
Выбранное решение
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.
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.