Does anybody have an idea on how I can create shapes from Canny Edge Detection in Canvas?
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.