Question

Ttl;dr:
I need to move an image VERY slowly in canvas without obvious pixel by pixel movement. I need some sort of anti-aliasing.

---

Recently I was tasked with animating some “cloud” drawings horizontally in a webpage.

Easily enough I just threw the image into the DOM and used CSS3 transforms with a fallback to jQuery animation for browsers that don’t support CSS transforms yet.

Everything looked pretty good. I had some clouds moving smoothly moving across the page.

Then I kept getting requests from the designer to slow the movement down…way down.

Because browsers don’t do sub-pixel rendering for DOM objects the animation appears to run at 6 FPS.

So, I slap the image into canvas for some quick tests and find out that it doesn’t do sub-pixel rendering automatically, either.

My quick canvas animation demo (it doesn’t accurately time the movements, deal with it. :-p )

Answer 1

For older browsers, you could animate a sprite. Create maybe 4 versions of your image, each shifted 0.25px to the left from the previous one. Paste those together in a sprite and then animate the background-position.

function moveClouds(n)
{
    var v = (n % 4) * 417;
    var h = Math.ceil(n / 4);
    clouds.style.backgroundPosition = h + " " + v;
}