GPUOffscreenCanvas - 2d context returning null

[okwasniewski]

Hey!

I want to use GPUOffscreenCanvas with 2 context but when calling this code:

const canvas = new GPUOffscreenCanvas(1024, 1024);
const context = canvas.getContext('2d');

console.log(context); // <- null

Is this something that's going to be supported in the future?

[wcandillon]

yes indeed :) We are working on migrating Skia to use WebGPU: https://github.com/Shopify/react-native-skia/pull/2727 Then you will get your 2d context and it will integrate with 3d scenes at 0 cost.

However you can already use Skia anyways (Surface.MakeOffscreen()). Is this for visionPro? macOS? Both?

@Saadnajmi we haven't looked at using Skia on macOS yet but that could be interested. Skia Graphite is I think already shipped on most macOS google chrome clients.

[Saadnajmi]

@wcandillon Is macOS support for Skia blocking anything? A quick look at the repo tells me the actual macOS specific code looks quite low / nonexistent, so it's mostly the rest of the work to get a new out of tree (apple) platform. Similar to what I did here. I'm not sure if/when I'd get to it though, current main focus is React Native macOS Fabric.

[Saadnajmi]

While I'm here (apologies if this is the wrong place to ask), I'm curious if react-native-skia is a viable replacement for react-native-svg? As in, can you configure it to just render drop in SVGs for you? I'm mostly curious about the size vs performance implication, but I think I'd have to test that myself

[wcandillon]

About SVG support in Skia you can read more about it at https://shopify.github.io/react-native-skia/docs/images-svg/

[okwasniewski]

Thanks for answering @wcandillon we need this for a client's project that's not (yet 🤞) related to visionOS.

We need to draw an image and call getImageData() on it, roughly something like this:

canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')

if (ctx) {
    ctx.drawImage(img, 0, 0)
    return ctx.getImageData(0, 0, canvas.width, canvas.height)
}

Is it possible to achieve with skia today?

[wcandillon]

yes of course but you are way better off to draw the image in WebGPU directly no? No extra deps. Bring in Skia if you need advanced 2d primitives like SVG paths for instance.

[okwasniewski]

@wcandillon Yeah, definitely it's better to use WebGPU directly! Do you have a timeline when you plan the 2d context to be available?

[wcandillon]

which primitives do you need from 2d context? draw image and that's it? This is how we draw in image in WebGPU for instance: https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/components/Texture.tsx

[okwasniewski]

Yeah, mostly draw image and that's it 😅

I will try your example, thank you!