#ClipOp

How a clip operation combines with the existing clip on the canvas. Passed as an argument to clipRect / clipRRect / clipPath. Most code wants Intersect — clipping in then clipping in again should narrow the visible region, not replace it.

const op = controls.select('op', ['Intersect', 'Difference'], 'Intersect');

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

const outer = CK.LTRBRect(120, 50, 300, 200);
const inner = CK.LTRBRect(180, 90, 360, 230);

loop(() => {
  canvas.clear(CK.WHITE);

  canvas.save();
  canvas.clipRect(outer, CK.ClipOp.Intersect, true);
  canvas.clipRect(inner, CK.ClipOp[op()], true);
  canvas.drawCircle(210, 128, 200, paint);
  canvas.restore();

  surface.flush();
});

Toggle the dropdown — Intersect keeps only the overlap of outer and inner; Difference removes inner from the existing clip (the visible region becomes outer minus inner).

#All values

#See also

• Canvas.clipRect, clipRRect, clipPath.
• Canvas.save / restore — clip state stacks with save levels.