Compositing and Clipping

Alpha Layer

An opaque navy band paints first, then globalAlpha turns the orange overlay translucent so the band shows through, and a final opaque green tag confirms the alpha was reset.

Program

globalAlpha multiplies the alpha of every fill, stroke, or image draw until it is changed again. A translucent overlay lets the layer underneath show through.

alpha_layer.html
Visuals: captured from real browser rendering
<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.fillStyle = "#1e3a8a";
  ctx.fillRect(40, 60, 220, 90);
  ctx.globalAlpha = 0.5;
  ctx.fillStyle = "#f97316";
  ctx.fillRect(120, 90, 200, 80);
  ctx.globalAlpha = 1;
  ctx.fillStyle = "#bbf7d0";
  ctx.fillRect(60, 140, 80, 40);
</script>

  1. Paint the opaque navy band.

    A solid navy band covers most of the canvas.
    With alpha 1 the fill is fully opaque.

  2. Lower the global alpha to one half.

    The canvas is unchanged while the alpha value changes.
    globalAlpha is paint state, not a drawing call.

  3. Draw the orange overlay with reduced alpha.

    An orange overlay rectangle covers part of the navy band but lets it show through.
    A translucent layer mixes with the destination instead of replacing it.

  4. Reset the global alpha to one.

    The canvas does not change while alpha resets.
    Restoring alpha returns later draws to fully opaque.

  5. Paint an opaque green tag.

    A solid mint green tag appears at the bottom; the orange overlay above remains translucent.
    Earlier translucent pixels remain; only later draws return to opaque.
globalAlpha globalAlpha multiplies the alpha of every drawing call until it is changed.
layering A translucent layer reveals the destination through partial transparency.