title: How to clear the fillText that is setInterval?
body: <p>This is a simple code to animate a line of text in a canvas but when I use <code>clearRect</code> it still remains on the canvas and doesn't get erased.</p>
  
  <p>Here is the WebApp:</p>
  
  <pre><code>&lt;title&gt;Error Clearing FillText&lt;/title&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var c, ctx, episode;
      var map01 = "Overgrown...", map02 = "Flood Zone...";
  
      function load() {
          c = document.getElementById("canvas");
          ctx = c.getContext("2d");
          episode = document.getElementById("episode");
          ctx.clearRect(0, 0, 400, 240);
          ctx.drawImage(episode, 10, 5);
          ctx.font = "20px san-serif";
          ctx.fillStyle = "white";
      }
  
      var nameCharCount1 = 0, nameCharCount2 = 0;
  
      function funcMap01() {
          ctx.clearRect(0, 0, 400, 240);
          ctx.drawImage(episode, 10, 5);
          setInterval('loadMap01()', 70);
      }
  
      function funcMap02() {
          ctx.clearRect(0, 0, 400, 240);
          ctx.drawImage(episode, 10, 5);
          setInterval('loadMap02()', 70);
      }
  
      function loadMap01() {
          nameCharCount1++;
          var text = map01.substring(0, nameCharCount1);
          ctx.setFillStyle = "0";
          ctx.fillText(text, 16, 25);
      }
  
      function loadMap02() {
          nameCharCount2++;
          var text = map02.substring(0, nameCharCount2);
          ctx.setFillStyle = "0";
          ctx.fillText(text, 16, 25);
      }
  
      addEventListener("load", load, false);
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;"&gt;
      &lt;/canvas&gt;
      &lt;br&gt;
      &lt;button onclick="funcMap01();"&gt;Overgrown...&lt;/button&gt;
      &lt;button onclick="funcMap02();"&gt;Flood Zone...&lt;/button&gt;
      &lt;h1&gt;I hate arrays..&lt;/h1&gt;
  
  &lt;/body&gt;
  
      &lt;img id="episode" src="http://i717.photobucket.com/albums/ww176/T3ZTAM3NT/Episode_zps4fa66a1b.png" style="display: none;"&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Coolai/7k2x5/" rel="nofollow">JSFIDDLE.</a></p>
  
  <p>Do you have any tips/ideas on how should I go about clearing the text?</p>