next »

[quantumpotato]

http://stackoverflow.com/questions/34124108/fill-in-outer-area-of-an-interior-polygon

I'm drawing a ship with 4 points in a shipVertexes array. Inside the ship, I'm drawing the same shape smaller with the stunVertexes.

Stroking the context yields the attached image. You can see how there's a small ship inside the larger one. (Red ship)

I want to fill in the space between the outer ship & the inner ship, leaving an empty (black) space in the middle.

When I run context.fill(), the entire space is filled solid (see Yellow ship).

How do I fill in just the outside of the interior space?

[zleub]

I didn't get why context.fill() should not fill the inner space but in that position, i usually choose to fill the larger space before filling the little one with alpha or whatever.

PS: this is a way too big picture.

[evercalm]

http://stackoverflow.com/questions/34124108/fill-in-outer-area-of-an-interior-polygon

I'm drawing a ship with 4 points in a shipVertexes array. Inside the ship, I'm drawing the same shape smaller with the stunVertexes.

Stroking the context yields the attached image. You can see how there's a small ship inside the larger one. (Red ship)

I want to fill in the space between the outer ship & the inner ship, leaving an empty (black) space in the middle.

When I run context.fill(), the entire space is filled solid (see Yellow ship).

How do I fill in just the outside of the interior space?

First draw the outer shape and fill it with desired color, then draw the smaller inner shape on top of outer shape with black color. It should give you the desired effect. If you need alpha for inner shape, then use clipping mask.

[quantumpotato]

Thank you!