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){
    
    //Clear the canvas first
    ctx.clearRect ( 0 , 0 , 300 ,100 );
    ctx.fillText(test1[index], 150, 91);
}
	
function clearScreen(){
	ctx.clearRect(0, 0, 300, 100);
}
	
var i = 0;
function playNextText(){
    setTimeout(function () {
        printWord(i);
        
        i++;
        if(i < test1.length){
            //There are more texts left
            playNextText();
        }
        else
           return;
    }, 200);
}
playNextText();