Q:

html5 canvas animation.  moving an images gives flickering or a trail

I've seen other posts about this but I can't find anything to help me out. 
I'm drawing an image on the canvas which moves, when it moves it leaves a trail of itself behind which hasn't been cleared.  If I draw this image on top of another I get no trail but the image on top flickers.  I don't think clearRect will work for me. 
Can I save the canvas state between the image animation?  Or should I be using a second canvas? 
I'm not quite sure how to proceed, any advice would be great
* added examples -  jsfiddle.net/zE67k/2 with an image and flicker.  jsfiddle.net/zE67k/3 without an image and trail.  this is just an example, I'm trying to achieve this with a background image to the canvas also. 
* I also tried placing one canvas on top of another and I still get the flicker, I think the problem is where I place the clearRect.  It does work if I put the clearRect just before the eye is drawn, but the way this code draws and updates the eyes does so one at a time, therefore the previous eye is cleared leaving only one.  I'm trying it from this tutorial http://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/

A:

You should save the clean canvas before drawing the other image ontop and restore that saved clean state before drawing the moved image again.  You can use an additional canvas to save a clean state:
// create clean buffer
var buffer = document.createElement('canvas'), 
   canvas = document.getElementById('myCanvas');

buffer.width = canvas.width;
buffer.height = canvas.height;

// draw "background"/clean state to canvas
drawBackground(canvas);

// save clean state
buffer.getContext('2d').drawImage(canvas);

Then whenver you want to draw / move your other image/item simply restore the clean state:
canvas.getContext('2d').drawImage(buffer);
drawObject(canvas, x, y, w, h);

