filters is very slow

[quarksb]

the api getImageData is very slow beacause it need gpu convert data to cpu, why not just set the filterContext as the input of filters? which could get filter canvas easily

[lavrton]

If you mean this https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter, it is not supported by Safari. For rendering consistency, I am not sure if I want to do a "fallback" implementation.

[quarksb]

actually, i can use canvas globalCompositeOperation or webgl to render my own filter, such as an inner shadow function as shown below, but getImageData and putImageData is really a very slow api. and cost most of the time could you change getImageData as an optional choice? if you want, i can help you change the code and submit pr

export function drawInnerShadow(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, shadowOption: ShadowOption) {
    const { width, height } = ctx.canvas;
    const { offsetX, offsetY, blur, color } = shadowOption;

    const contourCanvas = new OffscreenCanvas(width, height);
    const contourCtx = contourCanvas.getContext('2d')!;

    // 先反向填充原图像
    contourCtx.drawImage(ctx.canvas, 0, 0);
    contourCtx.globalCompositeOperation = "source-out";
    contourCtx.fillRect(0, 0, width, height);

    const shadowCanvas = new OffscreenCanvas(width, height);
    const shadowCtx = shadowCanvas.getContext('2d')!;
    // 再用阴影填充
    shadowCtx.shadowOffsetX = offsetX;
    shadowCtx.shadowOffsetY = offsetY;
    shadowCtx.shadowBlur = blur;
    shadowCtx.shadowColor = color;
    shadowCtx.drawImage(contourCanvas, 0, 0);


    // console.log('drawInnerShadow', shadowOption);

    // 再用原图扣掉阴影
    shadowCtx.globalCompositeOperation = "destination-in";
    shadowCtx.drawImage(ctx.canvas, 0, 0);

    return shadowCanvas;
}

[lavrton]

What are you trying to do? Why don't you use regular shadows?

[quarksb]

there are two different questions:
"What are you trying to do", I want rmI just want the filter api become faster, like this pull request #1806
"Why don't you use regular shadows" because there isn't inner shadow in regular shadow

[quarksb]

@lavrton maybe the new pr is acceptable ? which have no effect on the previous code.

[lavrton]

I still don't full get the use case. How slow it is to use the current approach with imageData? Do you change shadows very frequently?