Minor update to the headless API

Author: wcandillon

docs/docs/getting-started/headless.md

@@ -15,14 +15,15 @@ You will notice in the example below that the import URL looks different than th
 
 ```tsx
 import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
-import { Fill, draw } from "@shopify/react-native-skia/lib/commonjs/headless";
+import { Fill, makeOffscreenSurface, drawOffscreen } from "@shopify/react-native-skia/lib/commonjs/headless";
 
 (async () => {
   const width = 256;
   const height = 256;
   const r = size * 0.33;
   await LoadSkiaWeb();
-  const {image, surface} = draw(
+  const surface = makeOffscreenSurface(width, height);
+  const image = draw(surface,
     <Group blendMode="multiply">
       <Circle cx={r} cy={r} r={r} color="cyan" />
       <Circle cx={size - r} cy={r} r={r} color="magenta" />
@@ -32,7 +33,7 @@ import { Fill, draw } from "@shopify/react-native-skia/lib/commonjs/headless";
         r={r}
         color="yellow"
       />
-    </Group>, width, height);
+    </Group>);
   console.log(image.encodeToBase64());
   // Cleaning up CanvasKit resources
   image.dispose();

package/src/headless/index.ts

@@ -6,26 +6,30 @@ import type { ReactNode } from "react";
 import { JsiSkApi } from "../skia/web";
 import { SkiaRoot } from "../renderer/Reconciler";
 import { JsiDrawingContext } from "../dom/types";
+import type { SkSurface } from "../skia";
 
 export * from "../renderer/components";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let Skia: any;
 
-export const draw = (element: ReactNode, width: number, height: number) => {
+export const makeOffscreenSurface = (width: number, height: number) => {
   if (!Skia) {
     Skia = JsiSkApi(CanvasKit);
   }
   const surface = Skia.Surface.MakeOffscreen(width, height);
   if (surface === null) {
     throw new Error("Couldn't create surface!");
   }
+  return surface;
+};
+
+export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   surface.flush();
-  const image = surface.makeImageSnapshot();
-  return { image, surface };
+  return surface.makeImageSnapshot();
 };