CODEWITHSUNDEEP
html5-canvas
pimvdb
pimvdb

Reputation: 154868

Why does filling yield a different result when reversing the path?

I was wondering why the following produces a white field where the squares overlap each other:

http://jsfiddle.net/yNTTj/5/

// square 1
ctx.moveTo(  0,   0); // left top
ctx.lineTo(200,   0); // right top
ctx.lineTo(200, 200); // right bottom
ctx.lineTo(  0, 200); // left bottom
ctx.lineTo(  0,   0); // left top

// square 2
ctx.moveTo(100, 100); // left top
ctx.lineTo(100, 300); // left bottom
ctx.lineTo(300, 300); // right bottom
ctx.lineTo(300, 100); // right top
ctx.lineTo(100, 100); // left top

ctx.fill();

So, while the first square is drawn with a path defined clockwise, the second square is drawn with a path defined counterclockwise.

I would expect both to color black, like what happens if we define the order of square 2 the same way: http://jsfiddle.net/yNTTj/6/. Apperantly, however, the overlapping space becomes white (generally speaking, the background color).

If I define a path the other way round, it's basically the same region it's cutting off, so why does it yield a different result when filling?

Upvotes: 1

Views: 114

Answers (1)

icktoofay
icktoofay

Reputation: 129019

That type of filling behavior is known as the "non-zero winding rule". Wikipedia has a page on it.

The specification defines that behavior. Search this page of the specification for "winding".

Upvotes: 2

Related Questions