# Hand Drawing Shape OpenCV/Canvas (HELP!)

**URL:** <https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964>\
**Category:** web dev\
**Created:** [March 22, 2018, 8:56am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964 "2018-03-22T08:56:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackwoods](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@blackwoods](https://forum.kirupa.com/u/blackwoods)\
**Post date:** [March 22, 2018, 8:56am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/1 "2018-03-22T08:56:11Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 23, 2018, 3:15pm UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/2 "2018-03-23T15:15:05Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![blackwoods](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@blackwoods](https://forum.kirupa.com/u/blackwoods)\
**Post date:** [March 26, 2018, 2:18am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/3 "2018-03-26T02:18:35Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 26, 2018, 3:56am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/4 "2018-03-26T03:56:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![blackwoods](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@blackwoods](https://forum.kirupa.com/u/blackwoods)\
**Post date:** [March 26, 2018, 7:05am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/5 "2018-03-26T07:05:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 27, 2018, 12:51am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/6 "2018-03-27T00:51:57Z")

</div>

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](https://docs.opencv.org/master/dc/dd3/tutorial_gausian_median_blur_bilateral_filter.html)

---

<div class="post-metadata">

**Author:** ![blackwoods](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@blackwoods](https://forum.kirupa.com/u/blackwoods)\
**Post date:** [March 27, 2018, 3:05am UTC](https://forum.kirupa.com/t/hand-drawing-shape-opencv-canvas-help/637964/7 "2018-03-27T03:05:25Z")

</div>

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