1978851 - Testcase applying a ctx.filter blur N times on canvas is 28x slower in Firefox compared to Chrome (followup to bug 1978498)

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Mayank Bansal]

Attachment: Repeated-empty-Blur-filter-on-canvas.html

Open testcase
Enter 5000000 in the input box (you can also input a smaller value)
Click Run

Chrome: https://share.firefox.dev/4kTVhMR (330ms)
Firefox : https://share.firefox.dev/450lSld (9s)

Comment 1

[Emilio Cobos Álvarez [:emilio]]

So what's going on in Chrome is that they just have a fast path for setting the same filter over and over: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/canvas/canvas2d/canvas_2d_recorder_context.cc;l=1474;drc=fadc961e5da1d6cb183185a49f958d79591e91d9

How's perf if you increment a counter in the loop so that setting filter is not a no-op?

Comment 2

[Mayank Bansal]

Updates testcase which does this :

 for (let i = 0; i < n; i++) {
        const blurAmount = i * 0.0001; // Increase blur radius gradually
        ctx.filter = `blur(${blurAmount}px)`;

N= 5000000
Firefox: https://share.firefox.dev/3IJFpPy (9.5s)
Chrome: https://share.firefox.dev/410NVjq (2.7s)

Comment 3

[Mayank Bansal]

Attachment: Repeated-effectful-Blur-filter-on-canvas.html

Comment 4

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:tlouw, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

[Mayank Bansal]

Empty: https://share.firefox.dev/4doTaie (9s)
Effectful: https://share.firefox.dev/4uN7Crx (9.5s)