JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

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

CSS

canvas{border:1px solid #000;}

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    strings = [
     "Hello look at me!!!",
     "Am I centered?",
     "I really should be centered!"        
     ],
     curString = 0;

canvas.width = 400;
canvas.height = 200;

ctx.fillStyle = "#003300";
ctx.font = '20px san-serif';



function changeText(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    
    var fontSize = 10*(curString+1);
    ctx.font = fontSize + 'px san-serif';
    
    var textString = strings[curString],
        textWidth = ctx.measureText(textString ).width;
    
    ctx.fillText(textString , (canvas.width/2) - (textWidth / 2), 100);
    
    curString++;
    if(curString == strings.length){
        curString = 0;        
    }
    setTimeout(changeText, 1500);
}

changeText();