globalCompositeOperation

Установка этого параметра в один из двенадцати вариантов, позволяет не только определять последовательность выдачи на экран  отрисованых элементов, но и также маскировать их полностью или частично, причем это могут быть любые объекты и кисти

  globalCompositeOperation = тип;  

тип - строка, из двенадцати возможных .

Этот код выводит все варианты композиций в виде выше показаного рисунка

var compositeTypes = [
  'source-over','source-in','source-out',
  'source-atop', 'destination-over',
  'destination-in','destination-out',
  'destination-atop','lighter',
  'darker','copy','xor'];

function draw(){
  for (i=0;i<compositeTypes.length;i++){
    var label = document
        .createTextNode(compositeTypes[i]);
    document.getElementById('lab'+i)
       .appendChild(label);
    var ctx = document
       .getElementById('tut'+i).getContext('2d');

    // draw rectangle
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    // set composite property
    ctx.globalCompositeOperation 
       = compositeTypes[i];
    
    // draw circle
    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
  }
}