clear the fillText via setInterval? - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

clear the fillText via setInterval?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 
   </head> 
   <body> 
      <title>Error Clearing FillText</title>  
      <canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;"> 
      </canvas> 
      <br> 
      <button onclick="funcMap01();">Overgrown...</button> 
      <button onclick="funcMap02();">Flood Zone...</button> 
      <h1>I hate arrays..</h1>  
      <img id="episode" src="https://www.java2s.com/style/demo/Google-Chrome.png" style="display: none;"> 
      <script type="text/javascript">
var c, ctx, episode;// ww  w.j a va2  s  .  co  m
var map01 = "Overgrown...", map02 = "Flood Zone...";
var interval1,interval2;
    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() {
        clearInterval(interval2);
        ctx.clearRect(0, 0, 400, 240);
        ctx.drawImage(episode, 10, 5);
        interval1=setInterval('loadMap01()', 70);
    }
    function funcMap02() {
        clearInterval(interval1);
        ctx.clearRect(0, 0, 400, 240);
        ctx.drawImage(episode, 10, 5);
        interval2=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);

      </script>  
   </body>
</html>

Related Tutorials