How to use backdrop filters with the imperative API?

[mswpearson]

Hello! I have a React component which uses the BackdropBlur component to blur a specific area of an image, I've added a snippet of the code below.

<BackdropBlur blur={30} clip={STAT_BLUR_RECT}>
    <Fill color={hexWithOpacity(COLORS_V2.primary.white, 0.1)} />
</BackdropBlur>

I am now trying to use the imperative API to replicate this effect on an offscreen canvas, but it doesn't look like backdrop filters are available on the API?

Is there a way I can achieve this? I'm sure it must be possible just can't find the correct thing to do. Thanks

[wcandillon]

The API allow you to use the declarative components even in offscreen:

const drawElementOffscreen = async (element: ReactElement, surface: SkSurface) => {
  const canvas = surface.getCanvas();
  const root = new SkiaSGRoot(Skia);
  await root.render(element);
  root.drawOnCanvas(canvas);
  const picture = recorder.finishRecordingAsPicture();
  root.unmount();
 surface.flush();
};

But you can also indeed do it with the imperative API using saveLayer:

// draw...
// Apply filter
canvas.saveLayer(undefined, undefined, filter);
canvas.restore();

[mswpearson]

Hi @wcandillon thanks for you help on this - didn't really end up using this solution but am now keen to try it again.

Having a couple of issues replicating your first code snippet, I don't see any function like SkiaSGRoot in the API, is that something in a newer version?