JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;">

JavaScript

window.onload = function () {
     var ctx = document.getElementById("ctx").getContext("2d");

     function createText(words) {
         var LENGTH = words.length;
         var LOOPS = LENGTH;
         var reader = 0;
         var timeDelay = 100;

         position = 10;

         while (LOOPS > 0) {
             letter = words.substr(reader, 1);

             setTimeout((function (letter, position) {
                 return function () {
                     ctx.fillText(letter, position, 10);
                 }
             })(letter, position), timeDelay);

             position += 6;
             reader += 1;
             LOOPS -= 1;
             timeDelay += 100;
         }

     }

     createText("Hello, how are you?");

 }