Hand Drawing Shape OpenCV/Canvas (HELP!)

Hello guys!

I am a student and all the help I can have are really appreciated! <3
My first target is to create a canvas, wherein I can draw shape manually. (Pentagon, hexagon, square, arrow, etc) I don’t want to draw the shape as solid one but I want to do it manually. Easy right? I can just use the canvas with that. But my problem lies here, After or during (I am not sure yet if which is better) drawing, (for example I am going to draw pentagon, ang my drawing is a bit squimsy, or to pointy something like that), I want to make the drawing smooth making it like I’ve drawn a solid shape. (meaning correcting the hand drawn shape/detecting what shape is that and recreating a good shape unlike the squimsy drawing) How can I do that?
What I’ve conclude is this: (but this is after drawing all the shape, but i’m not sure how to detect if the drawing is finished yet)

  • get the shape (know what kind of shape is that, i know OpenCV can do that)
  • get the height/radius/width (all requirements to be considered in the shape)
  • then redraw the shape (getting the max height as the basis of the size if the shape)

Is this good? But I am not sure on how to use OpenCV on web. As well as I want to re-shape the drawing during the drawing. Not after. And when I do this the web needs to be refreshed everytime right?
Do you have any points/idea/suggestion on how could I do this?

Thank you and I hope you could help me with this. Lovelots!

1 Like

This is a really interesting problem! I think your approach sounds reasonable, but I’ve never used OpenCV or attempted something similar to know what the pitfalls are :slight_smile:

@kirupa thanks. Yes. Because last time I’ve tried opencv, but not directly. I’ve used tesseract w/c is made of opencv. So i haven’t directly tried it yet.
Do you think you have any idea how i could I achieve this hand drawing shape and correct it? Thankyou!

What is the input opencv uses? It is it a series of vector points?

Image? Because I am going to use canvas of html5, then pass it to opencv.

Gotcha! Canvas does provide an option to turn what was entered into a bitmap. Looking through the openCV documentation, there are approaches listed for smoothing images: https://docs.opencv.org/master/dc/dd3/tutorial_gausian_median_blur_bilateral_filter.html

1 Like

Thank you @kirupa. I will look unto the link that you’ve given. Thanks so much for the help.