JSFiddle - React, Tailwind, and code Playground

by Raul Bojalil

HTML

<canvas style="width: 500; height: 500" width="500" height="500" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var phrase = "Hello World";
var completed = "";
var toComplete = phrase;
var phrasePointer = 0;

context.font = '50pt Verdana';

context.strokeText(phrase, 0, 100);
context.fillText(completed, 0, 100);

window.addEventListener("keyup", (e) => {
	console.log(e.key);
  
  if (phrase[phrasePointer].toLowerCase() == e.key.toLowerCase()) {
  	completed += phrase[phrasePointer];
    phrasePointer ++;
    if (phrase[phrasePointer] === " ") { 
    completed += phrase[phrasePointer]; 
    	phrasePointer ++; 
    }
  }
  
  if (phrasePointer === phrase.length) {
  alert("complete");
  }
  
  context.strokeText(phrase, 0, 100);
	context.fillText(completed, 0, 100);
  
});