title: Javascript get an animation to follow a path and saving canvas state
body: <p>A basic <a href="http://jsfiddle.net/vpngwxys/27/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>The main goal is to get the penguin to walk right down the line, then left back up. In general, I need it to walk along the path in the correct direction, but for this basic example I just need to figure this out and I can extend it to my paths. As shown in the fiddle, the paths are set like an array of coordinates like <code>[{x:n,y:m}]</code>. I also need <code>penguin_wrap</code> to be a promise as it is being used with <code>await</code> in my code, but the big issue I seem to be having is that when I run my code, the line gets erased and the penguin runs. In the fiddle, for some reason, this isnt being reproduced so as long as I can figure out how to move it properly I should be able to figure it out. </p>
  
  <p>I have this <a href="http://jsfiddle.net/gmj5yqed/39/" rel="nofollow noreferrer">fiddle</a> that shows it walking along a path, but I cant seem to apply it when the canvas is drawn underneath. Quick note, I need to save the state of the canvas because a line is animated first (using request animationframe and lineTo), which cannot be erased. The penguin needs to walk along the line (path)</p>
  
  <p>Thank you</p>