title: What's the purpose of Canvas.Context Save and Restore in this example?
body: <p><a href="http://www.authorcode.com/text-animation-in-html5/" rel="noreferrer">This page</a> shows some animations in HTML5 canvas. If you look at the <a href="http://www.authorcode.com/scrolling-text-right-to-left-in-html5" rel="noreferrer">source of the scroller</a>, there's a statement to save the context after clearing the rectangle and restoring it after the animation.  If I substitute the restore statement with another <code>ctx.clearRect(0, 0, can.width, can.height</code> statement, nothing works. I thought the restore is restoring the cleared rectangle but it seems its restoring more info. What's that extra info that's needed for the next frame? </p>
  
  <p>I am not looking for HTML5 textbook definitions of Save and Restore but I want to understand why they are needed in this specific example.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It's frustrating to get an answer where I specifically already mentioned in the question I don't want to get the definitions of save() and restore(). I already know Save() saves the state of the context and Restor()e restores it. My question is very specific. Why is restore() used in the manner in the example when all the Save did is saved an empty canvas. Why is restoring an empty canvas <strong>not</strong> the same as clearing it?</p>