如何用putImageData绘制到不舍入的位置，结果与drawImage相同？

Question

我有两个可见的画布，一个使用drawImage，另一个使用隐藏（缓冲）画布复制像素。除了一切都是相同的，但当我通过一些非整数值移动对象时，对象开始断断续续。我怀疑复制像素时的地板是问题，但是我想问一下如何做到这一点来产生与drawImage相同的结果？

I set up the 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如何处理这个？

Original code by @Loktar - stackoverflow.