javascript - HTML キャンバス間でピクセルデータをコピーする

Question

私は現在、JavaScriptを学ぶために小さな画像エディタを書いています。機能の 1 つは、明らかに描画ツールです。それを使用すると、それらのピクセルを実際のキャンバスの上にある別のキャンバスに描画し、マウスを離すと、上のキャンバスから下のキャンバスにピクセルをコピーします。

これは、描画されたピクセルを基になるキャンバスにコピーするために使用されるコードです。

this.applySketch = function() {
    this.revertStack.push(this.ctx.getImageData(0, 0, this.width, this.height));

    var real = this.ctx.getImageData(0, 0, this.width, this.height);
    var sketch = this.sketchctx.getImageData(0, 0, this.width, this.height);

    for(var i = 0; i < sketch.data.length; i += 4) {
        // check the alpha value to decide if to copy to the real canvas
        if(sketch.data[i+3] > 0) {
            real.data[i] = sketch.data[i];
            real.data[i+1] = sketch.data[i+1];
            real.data[i+2] = sketch.data[i+2];
            real.data[i+3] = sketch.data[i+3];
        }
    }

    this.ctx.putImageData(real, 0, 0);
    this.sketchctx.clearRect(0, 0, this.width, this.height);
}

私が経験している問題は、ピクセルが他のレイヤーにコピーされたときに同じように見えないことです。代わりに、コピーしているものの周りに白いピクセルの薄い輪郭があります。

マウスリリース前（ピクセルが最上層にあるとき） http://i.imgur.com/xHvN1iF.jpg

マウスを離した後 (コピーされたとき) http://i.imgur.com/P0sdybs.jpg

ここで何が起こっているのか、まったくわかりません。アンチエイリアシングで何かできますか？

ありがとう