Compositing and Clipping

Clip Region

A lavender background fills the whole canvas, then a circular path becomes the clipping region so the next fillRect only paints inside the circle.

Program

clip uses the current path as a mask. After clip runs, every drawing call only changes pixels inside that path.

clip_region.html
Visuals: captured from real browser rendering
<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.fillStyle = "#e0e7ff";
  ctx.fillRect(0, 0, 360, 210);
  ctx.beginPath();
  ctx.arc(180, 105, 80, 0, Math.PI * 2);
  ctx.clip();
  ctx.fillStyle = "#7c3aed";
  ctx.fillRect(40, 30, 280, 160);
</script>

  1. Paint the lavender background.

    A lavender background covers the canvas.
    No clip is active yet, so the fill covers everything.

  2. Add a circular path centered on the canvas.

    The path geometry is built but no clipping is applied yet.
    beginPath and arc only describe geometry; clip will use that path later.

  3. Use the path as a clipping region.

    The canvas is unchanged while the clipping region activates.
    clip uses the current path as a mask for later drawing.

  4. Fill a wide rectangle that the clip will mask.

    A purple disc replaces the lavender inside the circle; the corners stay lavender because they are outside the clip.
    fillRect tries to cover a wide area but only pixels inside the clip change.
clip clip turns the current path into a mask for later drawing.
path geometry A canvas path is invisible geometry until a paint method or clip uses it.