Drawing segmentation masks in Skia

[holma91]

I'm working on a project where:

1. the user uploads an image to my server
2. the server creates a segmentation mask and returns it to the user

So, the user now has the image and the array representing the mask. The array is always a 2D array/matrix of booleans representing every pixel in the image. If the image is 512x512, then the array will be a 512x512 matrix where every element represent if the given pixel is a part of the mask or not.

What I want to do is display the image, and then the mask on top of it. Right now I do this:

<Canvas style={{ flex: 1 }}>
      <Image
        image={image}
        x={0}
        y={0}
        width={imgWidth}
        height={imgHeight}
        fit="cover"
      />
        <Group>
          {scaledMask.map((row, y) =>
            row.map((isMasked, x) =>
              isMasked ? (
                <Rect
                  key={`${x}-${y}`}
                  x={x}
                  y={y}
                  width={1}
                  height={1}
                  color={'purple'}
                />
              ) : null
            )
          )}
        </Group>
 </Canvas>

It works but the performance is obviously terrible. It takes ~1 minute to get the mask drawn, but I want it to be in the milliseconds. What's the optimal way to implement this with Skia? I feel like it should be very simple, but I can't find an example of it in the docs so I'm asking here. Maybe it's possible to create an image from the matrix and overlaying it on the other image? Or maybe it's possible to draw it like above but in a much more efficient way? Appreciate all the help I can get!

EDIT: After thinking for a while, maybe the best approach is to instead create an image from the mask on the server and return that instead of the matrix. Then on the client I could just use two SKImage components after one another, right?

[hungtooc]

let server return the mask in image format then this will help you https://shopify.github.io/react-native-skia/docs/mask