can I use like canvas api in react-native-skia?

[JRfan123]

like in js:
drawImage()
drawRect().

not in the element-tag

[wcandillon]

yes such API is available but it is not documented yet.
You can find details here: https://github.com/Shopify/react-native-skia/blob/main/package/src/skia/types/Canvas.ts

[JRfan123]

ok， thank you! I will read it

[JRfan123]

    <Canvas
         ref={canvasRef}
         style={{ width: containerSize?.width, height: containerSize?.height }}
       />. 

isn't it in the canvasRef ? I can't find the skiaCanvas ， maybe you can update the docs , i think it will help many people

[wcandillon]

we recommend you use the declarative API indeed. Now the imperative API (drawImage()
drawRect())

[JRfan123]

ok, let me think ，i will access it

[headfire94]

@wcandillon is this supported in web? Can i use offscreen canvas in worker to draw something for performance

[AdamGerthel]

we recommend you use the declarative API indeed. Now the imperative API (drawImage() drawRect())

Could you describe why? I understand it's the "react way", and I'd prefer to use it, but I've found the imperative API to be much more reliable (see my lengthy post).

One huge performance benefit with the imperative API that I see if being able to create and reuse pictures. This means, to my understanding, that I can use Skia to render SVG icons across my app and cache them as pictures before rendering them - which in theory will be waaaay faster than using react-native-svg.

[Corelli-18512]

Here you can use the Picture API and then use the canvas element to draw a picture: https://shopify.github.io/react-native-skia/docs/shapes/pictures/

Or you can create an offscreen surface and then draw it as an image: https://shopify.github.io/react-native-skia/docs/animations/textures/#under-the-hood

@wcandillon Any reason why we cannot expose canvas element from canvas ref? I am using a really weird way right now to "steal" the instance, which seems unnecessarily hacky to me:

const [_canvas, setCanvas] = useState<SkCanvas | null>(null);
const realCanvasRef = useRef<SkCanvas | null>();
realCanvasRef.current = _canvas;

const picture = useMemo(() => createPicture((canvas) => {
    setCanvas(canvas);
...

And every time I draw on this canvas I need to refresh manually

realCanvasRef.current.draw...
canvasRef.current?.redraw(); // const canvasRef = useCanvasRef();

I understand I can do offscreen painting by creating another canvas and update image value of the target canvas with the new one's snapshot, but it would be really convenient to get direct access (while the instance can be "stolen" anyway).

[JRfan123]

I have used the declarative API, it is ok until now , but i I want to how to know whethe the image drawed complete, because sometimes it show slowly when I change the image by click change the index of list

[JRfan123]

I am trying to improve the performance of app .

[JRfan123]

maybe the loading of remote url image also cost some time