How do I manipulate mesh points of a drawing canvas to somewhat fit any sprite?

I am trying to make a drawing game. And I want that when player click a sprite that he wants to paint, a drawing canvas of that same shape appear there. That sprite (and hence the shape of drawing canvas) might be a circle or a leaf or anything for that matter. I know it might somehow be solved with mesh points property but I don't Know how.

I used this library in one of the project:

github.com/scottglz/image-outline

It returns an outline of any image as an array of coordinates. You can probably use it to make a mesh.

One promising approach is to use the marching squares algorithm on the image to get the edges. It would allow you to get a nice approximation without looking at all the pixels.

You could get multiple polygons from that when multiple shapes are drawn or there are holes inside the shapes. Since you want only one shape you could calculate the area of each and keep the biggest, or maybe find the convex hull of all of them perhaps, but the former would be better. Handling holes could be possible too but that would need more work. Essentially we’d make a cut from the hole to the outside of the polygon.

Next step could be to simplify the polygon a bit so there are less points. One simple way would be to look at every three points and remove the middle one if the angle between the three is a threshold from 180 degrees.

The final step would be to use distort mesh to make the shape. Size would be count/2 x 2. And set each on the mesh in a clockwise way. I’ve done it for a convex shape but since we are just concerned with the collision shape it should work with any polygon, but it just won’t draw correctly.

Seems like something I’d want to attempt sometime this week if I get time.

Example is done:

dropbox.com/s/339te0solmn4yws/marchingSquares.c3p

Should work as long as the image isn't touching the edge of the canvas. I didn't add the polygon simplifying step. Also it just uses the first polygon it finds if there are multiple.

For debugging the outline used is drawn onto the canvas, and the collision shape is visible.

I haven't gotten to figuring out how to deal with how any fullscreen scaling changes the resolution of the canvas.

Updated link to handle fullscreen scaling.