FillType

How a Path decides which pixels are inside vs outside when filled. Set via path.setFillType(CK.FillType.<value>). Matters when subpaths overlap or when one subpath is fully inside another (donut shapes).


const ft = controls.select('fillType', ['Winding', 'EvenOdd'], 'EvenOdd');

const path = new CK.Path();
path.addCircle(160, 128, 80);
path.addCircle(260, 128, 80);

const paint = new CK.Paint();
paint.setColor(CK.Color(40, 90, 180, 0.6));
paint.setAntiAlias(true);

loop(() => {
  path.setFillType(CK.FillType[ft()]);
  canvas.clear(CK.WHITE);
  canvas.drawPath(path, paint);
  surface.flush();
});

EvenOdd makes the overlap of the two circles transparent; Winding (default) keeps both circles fully filled.

All values

Value	Rule
`Winding`	Default. Cast a ray from the test point; sum subpath winding directions it crosses. Non-zero sum = inside. Subpath direction matters.
`EvenOdd`	Cast a ray; count crossings. Odd = inside, even = outside. Direction-independent. Use for explicit "donut" cutouts.

#FillType

#All values

#See also

FillType

All values

See also