Edit in JSFiddle

var stage;

window.onload = function() {

    $("canvas").attr({height:$("#wrapper").height()});
    $("canvas").attr({width:$("#wrapper").width()}); 
    
    //描画する
    refresh("source-over");
    
};

//ドロップダウンが変更された時
$("#composites").change(function(){
    refresh($("#composites option:selected").val());
});


function refresh(composite){
    
    stage = new Stage($("canvas")[0]);        

    var rRect = new Text("JS5","bold 40px Arial","#f05");
    rRect.x = 23;
    rRect.y = 153;
    
    var lRect = new Text("JS5","bold 40px Arial","#0e5");
    lRect.x = 20;
    lRect.y = 150;
    
    //選択された方法で画像合成する
    lRect.compositeOperation = composite;
    
    stage.addChild(rRect,lRect);
    stage.update();

}

<div id="wrapper">
<select id="composites">
<option value="source-over">source-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-atop">source-atop</option>
<option value="destination-over">destination-over</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-atop">destination-atop</option>
<option value="lighter">lighter</option>
<option value="darker">darker</option>
<option value="xor">xor</option>
<option value="copy">copy</option>
</select>
<canvas></canvas>
</div>

html{
    min-height: 100%;
    overflow: auto;
    position:relative;
    z-index: 1;
}

input{font-size:5px;}

body{
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: relative;
    z-index: 1;
}

#wrapper{
    height: auto;
    overflow: auto;
    position: fixed;
    z-index: 1;
    width: 100%;
    height:100%;
    min-height:100%;
}

canvas{
    position: fixed;
}