Watch a demo of different values of the globalCompositeOperation property.
Or click a specific value to see the result:
const c = document.getElementById('myCanvas'); const ctx = c.getContext('2d'); ctx.fillStyle='blue'; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation='source-atop'; ctx.beginPath(); ctx.fillStyle='red'; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill();