html5-canvas - キャンバス要素での複数のglobalCompositeOperationの結果は、context.restore（）関数なしでは機能しません

Question

複数のglobalCompositeOperationの結果をキャンバスに表示したい。私は次のようにコードを書きましたあなたのブラウザはHTML5をサポートしていません

<canvas id = "tempCanvas" width = "400" height = "100" style = "display: none;">
</canvas>

<script>
    var context = document.getElementById("canvas").getContext("2d");
    var tempContext = document.getElementById("tempCanvas").getContext("2d");

    var offset = 10;
    var operationValues = new Array();

    operationValues.push("source-atop");
    operationValues.push("source-in");
    operationValues.push("source-out");
    operationValues.push("source-over");

    for (var i = 0; i < operationValues.length; i++) {
        tempContext.save();
        tempContext.clearRect(0, 0, 400, 100);

        //draw destination rectangle
        tempContext.beginPath();
        tempContext.rect(10, 10, 50, 50);
        tempContext.fillStyle = 'red';
        tempContext.fill();

        tempContext.globalCompositeOperation = operationValues[i];

        //draw source rectangle
        tempContext.beginPath();
        tempContext.rect(40, 40, 50, 50);
        tempContext.fillStyle = 'green';
        tempContext.fill();

        /*
         *the result will be incorrect 
         *if you remove tempContext.restore() function
        */
        tempContext.restore();

        context.drawImage(document.getElementById("tempCanvas"), 0, 0);
        context.translate(100, 0);
    }
</script>

なぜtempContextを復元する必要があるのですか？
tempContextを復元せずに最後の結果が正しいのはなぜですか？http://jsfiddle.net/thepyaethuaung/pcNvA/3/
でチェックしてください