Additive blending — light that adds up

Blend mode = the rule for how colours mix with what's behind them. Additive means overlaps get brighter — the universal "this is made of light" mode behind every glow, aura, and lamp in 2D games. Here, three orbiting light-blobs cross paths.

let mode = "lighter";   // ← additive. change to "source-over"
                        //   (normal) and see the light die.

function blob(x, y, radius, color) {
  const g = ctx.createRadialGradient(x, y, 0, x, y, radius);
  g.addColorStop(0, color);
  g.addColorStop(1, "rgba(0,0,0,0)");   // soft edge → glow
  ctx.fillStyle = g;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 7);
  ctx.fill();
}

onFrame((dt, t) => {
  ctx.clearRect(0, 0, W, H);

// dark ground so the light has something to matter against
  ctx.fillStyle = "#191527";
  ctx.fillRect(0, 0, W, H);

ctx.globalCompositeOperation = mode;

const cx = W / 2, cy = H / 2, R = Math.min(W, H) * 0.22;
  // slow orbits (0.15 Hz — calm on purpose)
  blob(cx + Math.cos(t * 0.9) * R,       cy + Math.sin(t * 0.9) * R,       90, "rgba(122,132,236,0.8)");
  blob(cx + Math.cos(t * 0.7 + 2.1) * R, cy + Math.sin(t * 0.7 + 2.1) * R, 90, "rgba(214,168,120,0.8)");
  blob(cx + Math.cos(t * 0.5 + 4.2) * R, cy + Math.sin(t * 0.5 + 4.2) * R, 90, "rgba(157,190,157,0.8)");

ctx.globalCompositeOperation = "source-over";
});

Watch where two blobs overlap: the crossing is brighter than either. That's additive. Change mode to "source-over", re-run, and the crossings go flat — one word, whole different physics of light.

Try tweaking: radius 90 → 200 (floodlights) · the alpha values 0.8 → 0.3 (candlelight) · make one blob follow the pointer with canvas.onpointermove — a torch you carry.

In Godot: CanvasItemMaterial → Blend Mode → Add on any soft blob sprite (download glow.gd — it shows this plus WorldEnvironment bloom). In Unity: an additive material on a soft sprite; for screen-wide glow, URP Bloom + HDR emission. In Unreal: material Blend Mode → Additive; bloom is on by default. Chapter 03.