如何在HTML5 Canvas中的另一个矩形上绘制矩形？

Question

我尝试使用鼠标在另一个矩形上绘制一个矩形。我现在所困的是新的mask矩形无法渲染。我所做的最接近的是SoundCloud，你可以在那里擦洗歌曲。

到目前为止，这是我的代码。

<video id="video" width="500" height="400">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
</video>
<canvas id="demoCanvas" width="500" height="300"></canvas>



var vid = document.getElementById("video");
var frame = vid.duration * 15;

var stage = new createjs.Stage("demoCanvas");

var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(0, 20, frame, 100);
rect.on('mousedown', function (event) {
    var startX = event.rawX;
    $('#start').html(startX);
});

rect.on('mouseup', function (event) {
    var destX = event.rawX;
    $('#stop').html(destX);

    var startX = $('#start').html();

    var mask = new createjs.Shape();
    mask.graphics.beginFill('#FFF').drawRect(parseInt(startX), 20, destX, 100);
    stage.addChild(mask);
    stage.update();
});


stage.addChild(rect);
stage.update();

http://jsfiddle.net/noppanit/7ewevL0t/3/