javascript - drawImageと同じ結果で丸められていない位置にputImageDataで描画する方法は?

Question

drawImage を使用するキャンバスと、非表示 (バッファ) キャンバスからピクセルをコピーするキャンバスの 2 つの可視キャンバスがあります。すべてが同じであることを除いて、オブジェクトを整数以外の値で移動すると、オブジェクトが途切れ始めます。ピクセルをコピーするときのフローリングが問題だと思いますが、drawImage と同じ結果を得るにはどうすればよいですか?

私はjsfiddleをセットアップしました。

(右側のオブジェクトがスタッターします)

ピクセルをコピーする関数。

function draw2()
{
    var canvasData = ctx2.createImageData(canvas2.width, canvas2.height),
        cData = canvasData.data;

        for (var w = 0; w < imgToDraw.width; w++)
        {
            for (var h = 0; h < imgToDraw.height; h++)
            {
                if (elm.x + w < canvas2.width && elm.x + w > 0 &&
                    elm.y + h > 0 && elm.y + h < canvas2.height)
                {
                    var iData = (h * imgToDraw.width + w) * 4;
                    var pData = (Math.floor(elm.x + w) + Math.floor(elm.y + h) * canvas2.width) * 4;

                    cData[pData] = imagePixData[iData];
                    cData[pData + 1] = imagePixData[iData + 1];
                    cData[pData + 2] = imagePixData[iData + 2];
                    cData[pData + 3] = imagePixData[iData + 3];
                }
            }
        }    
    ctx2.putImageData(canvasData, 0, 0);    
}

14行目（jsfiddle行102）が疑わしい：

var pData = (~~ (elm.x + w) + ~~ (elm.y + h) * canvas2.width) * 4;

~~ の代わりに Math.round または Math.ceil を使用して目的の結果を得ることができますが、どちらが良いのか、または drawImage がこれをどのように処理するのかわかりません。

@Loktar によるオリジナル コード - スタックオーバーフロー。