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();
}
}