JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="screen"></canvas>

CSS

#screen{
	height: 100px;
	width: 300px;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
}

JavaScript

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(){ 
		if(index < test1.length){
            ctx.fillText(test1[index], 150, 91);
            index++
            printWord(index);        
        }
       
	}, 1000);
}


	
function clearScreen(){
	ctx.clearRect(0, 0, 300, 100);
}
		
function playText(){
		printWord(0);
	
}
playText();