Using setTimeout with Canvas to Print Text from Array - Javascript Canvas

Javascript examples for Canvas:Text

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

Description

Using setTimeout with Canvas to Print Text from Array

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-2.1.0.js"></script> 
      <style id="compiled-css" type="text/css">

#screen{/*from  w  w  w.  j  av a  2  s  .c  o  m*/
   height: 100px;
   width: 300px;
   background: #FFFFFF;
   border: 1px solid #DDDDDD;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var test1 = ["This","is","a","test","to","see","if","it","really","works."];
var c = document.getElementById("screen"); //Setup screen.
var ctx = c.getContext("2d");
ctx.font = "normal 42px Arial";
ctx.textAlign= "center";
function printWord(index){
   setTimeout( function(){
        clearScreen();
      ctx.fillText(test1[index], 150, 91);
   }, 200*index );
}
function clearScreen(){
   ctx.clearRect(0, 0, 300, 100);
}
function playText(){
   for(var i = 0; i < test1.length; i++){
      printWord(i);
   }
}
playText();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="screen"></canvas>  
   </body>
</html>

Related Tutorials