Create shapes from Canny Edge Detection in Canvas

Question

Does anybody have an idea on how I can create shapes from Canny Edge Detection in Canvas?

Answer 1

I assume here you already have the Canny edge detection implemented based on the way the question is formulated -

You can use an approach such as this (written in Java but should be easy enough to translate into JavaScript) and/or perhaps some limited use of line-fitting approaches (statistical).

The essence is that you will have to find out which pixels are connected and create polygon objects/arrays yourselves based on the result of the edge detection.

Once you have the connected pixels you can use point reduction algorithms such as the Ramer–Douglas–Peucker algorithm (JavaScript implementation here) to avoid the polygons to contain every single point of similar sloped lines and so forth.

You will run into a variety of challenges though such as short segmented lines due to too much noise in the original image or "weak lines", clusters of "lines" which makes it hard to find out how to connect them as polygons.

Answer 2

I don't know of any libraries for this, however you could:

• Use getImageData() to access a byte[] of pixel data
• Implement your own convolution filter on top of that data (examples for this may exist online)

In this way you can find areas of high contrast (edges.)

EDIT I agree with Ken -- I may have misread the question.

In addition to Ken's answer, if you know what kinds of shapes you're looking for then you might like to look at the Hough Transform which is well suited to detecting lines, ellipses and other shapes that can be geometrically defined using only a few parameters.