title: Sprite Animation clearRect alternative?
body: <p><strong>WHAT?</strong>  I am attempting to use canvas and JavaScript to display an animation on top of a grid which also must be drawn using JavaScript.  <a href="https://jsfiddle.net/cp1wqeeg/6/" rel="nofollow noreferrer">https://jsfiddle.net/cp1wqeeg/6/</a> </p>
  
  <p><strong>PROBLEM!</strong> To remove the previous frames of the animation I have used clearRect().  This however breaks my grid which I do not want :(</p>
  
  <p><strong>JSFiddle:</strong> <a href="https://jsfiddle.net/cp1wqeeg/5" rel="nofollow noreferrer">https://jsfiddle.net/cp1wqeeg/5</a></p>
  
  <p><code>ctx.clearRect(50, 100, width, height);</code></p>
  
  <p><strong>QUESTION</strong>  How can I remove the previous frames of my animation without breaking the grid behind my sprite?  </p>