CODEWITHSUNDEEP
htmldrawinghtml5-canvas
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

html5 - How to check for shapes drawn on canvas?

I have made a webpage on which there's a canvas on which we can draw freehandly. Now I wanted to know that is there's a way to find that the user has now drawn a "square", "circle" or "rectangle"? I mean that if I draw a square on the canvas, how can I write the code to check that I have drawn a square?

Upvotes: 2

Views: 346

Answers (1)

markE
markE

Reputation: 105015

Not many details to work with from you.

Also, “freehand” means very imprecise shapes.

So here’s a generic answer to determine your shape:

Determine the bounding box of a freehand shape (minX,maxX,minY,maxY).

Test#1: if (maxX-minX) is largely different from (maxY-minY), then you have a rectangle.

Test#2: Walk one of corners towards the center. If you quickly cross part of the drawing, you have a square.

By process of elimination, if Test#1 and Test#2 fail, then you have a circle.

Upvotes: 1

Related Questions