javascript - 別の canvas/image(png) から canvas putImageData を使用して透明ピクセルをコピーする際に問題があります

Question

ここで説明されているメソッドを stackoverflowにコピーしようとしています。しかし、解決方法がわからない問題がいくつかあります。

すべてを示すためにjsfiddleをセットアップしました。これは、パーティクルのみが移動して描画される2 番目の jsfiddleです。

私の問題は描画にあります。プロファイラーは、約 10000 個のパーティクルで drawImage が全体のループ時間の 40% を占めることを示しました。直接描画せずに計算のみを行うと、コードの実行を妨げるものは何もないため、問題は描画にあります。

---

これらの副作用なしでこの手法を使用する方法はありますか? 現在、円弧で円領域を作成する方法を紹介していますが、他のオブジェクトにも png ファイルを使用しており、まったく同じ動作を示します。

(問題: 透明な領域の代わりに黒い領域が重なっています。下の円の端が上の円を通して見えます)

私は自分自身をできるだけ明確に表現したいと思います（上の写真は私の問題を非常に明確に示しています）。あなたの助けに感謝したいと思います.

描画機能 - 表示されているキャンバスへの最終的な描画。

Game.prototype.draw2 = function(interpolation, canvas, ctx, group)
{
    var canvasData = ctx.createImageData(canvas.width, canvas.height),
        cData = canvasData.data;

    for (var i = 0; i < group.length; i++)
    {
        var obj = group[i];

        if(!obj.draw)
        {
            continue;
        }

        var imagePixelData = obj.imagePixelData;

        var x = obj.previous.x + (obj.x - obj.previous.x) * interpolation;
        var y = obj.previous.y + (obj.y - obj.previous.y) * interpolation;

        for (var w = 0; w < obj.width; w++)
        {
            for (var h = 0; h < obj.height; h++)
            {
                if (x + w < canvas.width && obj.x + w > 0 &&
                    y + h > 0 && y + h < canvas.height)
                {
                    var iData = (h * obj.width + w) * 4;
                    var pData = (~~ (x + w) + ~~ (y + h) * canvas.width) * 4;

                    cData[pData] = imagePixelData[iData];
                    cData[pData + 1] = imagePixelData[iData + 1];
                    cData[pData + 2] = imagePixelData[iData + 2];
                    if (cData[pData + 3] < 100)
                    {
                        cData[pData + 3] = imagePixelData[iData + 3];
                    }

                }
            }
        }    
    }
    ctx.putImageData(canvasData, 0, 0);
};

そして、これが私が他の目に見えないキャンバスにピンクがかった円形の領域を準備する方法です.

Game.prototype.constructors.Attractor.prototype.getImageData = function(context)
{
    this.separateScene = new context.constructors.Graphics(this.width, this.height, false);
    this.image = this.separateScene.canvas;
    this.separateScene.ctx.beginPath();
    this.separateScene.ctx.arc(this.radius, this.radius, this.radius, 0, 2 * Math.PI, false);
    this.separateScene.ctx.fillStyle = '#ff9b9b';
    this.separateScene.ctx.fill();
    this.separateScene.ctx.beginPath();
    this.separateScene.ctx.arc(this.radius, this.radius, this.radiusCut, 0, 2 * Math.PI, false);
    this.separateScene.ctx.fillStyle = 'rgba(255, 255, 255, 0.27)';
    this.separateScene.ctx.fill();
    this.separateScene.ctx.beginPath();
    this.separateScene.ctx.arc(this.radius, this.radius, this.coreRadius, 0, 2 * Math.PI, false);
    this.separateScene.ctx.fillStyle = '#ff64b2';
    this.separateScene.ctx.fill();
    this.imageData = this.separateScene.ctx.getImageData(0, 0, this.width, this.height);
    this.imagePixelData = this.imageData.data;
};