Draw a self intersecting polygon on the HTML Canvas.

Question

I'm looking for a way to draw a self intersecting polygon with holes, I'm using the HTML Canvas element.

So given 5 points, I want to draw the red one below.

This question is essentially the same thing.

Note: I don't want to do this using line intersections and adding more points, the actual paths I will be using will be curved.

Answer 1

I'm mostly sure you don't wanna draw it all yourself, do you ? http://gpolo.awardspace.info/fill/main.html shows it being done, but it is all manual work.

Answer 2

You can't draw the first pentagram with a single path in Canvas 2D - the fill rule being used there is even-odd and Canvas fills shapes with the non-zero winding rule.

I think you'll need to compute the intersection points for the corners of the interior pentagon and fill it separately. To achieve the drawing you use as an example, you could fill the pentagram (without stroke lines), fill the internal pentagon (again without stroke lines) then draw the pentagon outline stroke without filling.