HTML5 - Canvas

onload = init;
var dropdown;
var opr = ['source-over','source-atop','source-in','source-out','destination-over','destination-atop','destination-in','destination-out','lighter','copy','xor'];
function init() {
createDropdown();
draw(opr[0]);
}

function draw(mode) {
var canvas = document.getElementById('canvas');
if (!canvas || ! canvas.getContext) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.fillStyle = '#ff0000';
ctx.fillRect(100,100,150,150);
ctx.globalCompositeOperation = mode;
ctx.fillStyle = '#0000ff';
ctx.fillRect(150,150,150,150);
}

function createDropdown() {
if (document.uniqueID) { return }
var extra = document.getElementById('extra');
var dropdown = document.createElement('select');
extra.appendChild(dropdown);
for (i = 0; i < opr.length; i ++) {
var opt = document.createElement('option');
opt.text = opt.value = opr[i];
dropdown.add(opt,null);
}
dom.event.addEventListener(dropdown, 'change', function() {draw(dropdown.value)});
}