How to create a coloring app?

[MC-HaoPhan]

Hello everyone, I'm looking to create a coloring app. Currently, I'm using Paths to create the drawing strokes and a PNG image as the background. However, there are cases where the coloring spills over the edges of the image. After studying some apps, I noticed that they handle coloring in a way that it only applies within the initially colored area and doesn't spill outside. Does anyone have any ideas on how to achieve this? Thanks, everyone.

My application currently:

My code:

[Albx68]

You can use masks to make sure the color doesn't spill out

refer to

https://shopify.github.io/react-native-skia/docs/mask

[shekharskamble]

Hey @MissingCorner-HaoPhan I am working on something similar and looking for solution. it would be great if we can connect

[amitchaudhary140]

Hi @shekharskamble @MC-HaoPhan did you manage to find the solution?

[Albx68]

Try this

@amitchaudhary140 @MC-HaoPhan @shekharskamble

<Mask
mask={
<Path
path={ShapePath}
color={'#fff'}
style={'fill'}
/>
}>

//...coloring part here

      This will make it so that the color  will only be visible where the path overlays the color

[amitchaudhary140]

Okay will try that out. But I guess with the help of masking we can just avoid coloring on TOP of outlines. But let's say, if I want to allow user to draw color in one particular section. If his finger crosses the outline and is in another section, that other section should not be colored or affected.

Also I don't understand one thing is that how come @MC-HaoPhan in above image is able to avoid coloring on outlines using PNG image?

[Albx68]

@amitchaudhary140 You can try using gestures to see where you're interacting on the canvas and you can create a basic collision detection function (your finger and the canvas) and get the shape at the finger position you want to colour, I guess that's one way to go about this.