html5 canvas image movement issue

Question

The picture is drawn using:

ctx.drawImage(this.img, renderPositionX, renderPositionY, renderSizeX, renderSizeY);    

When I slowly move the picture at a speed of 0.005 pixels per frame, I begin to observe how the image is compressed and stretched. As if each pixel is periodically stretched to the next pixel.

Tried: ctx.imageSmoothingEnabled = true; But it only enables smoothing of picture itself, not how it is moved. Also tried to round size and position (renderPositionX, renderPositionY, renderSizeX, renderSizeY).

How can I fix this? What is it all about?

Answer 1

I've had this problem too, and I found the best fix was to use

context.drawImage(src, Math.round(xPos), Math.round(yPos));

I hope this helps!