JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="100"></canvas>

CSS

#canvas {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3)
}

JavaScript

const keyAnimations = {};
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.font = '22px sans-serif';
context.fillColor = 'black';

class KeyAnimation {
  
  constructor(keyCode) {
    this.keyCode = keyCode;
    this.char = String.fromCharCode(keyCode);
  }
  
  onFrame () {
    const x = 10 + (this.keyCode - 65) * 22;
  	const y = 54;
  	context.fillText(this.char, x, y);
  }
}

document.addEventListener('keydown', event => {
  keyAnimations[event.keyCode] = new KeyAnimation(event.keyCode);
});

document.addEventListener('keyup', event => {
  delete keyAnimations[event.keyCode];
});

function onFrame () {

	context.clearRect(0, 0, canvas.width, canvas.height);
  
	for (let keyCode in keyAnimations) {
  	keyAnimations[keyCode].onFrame();
  }
  
	requestAnimationFrame(onFrame);
}

requestAnimationFrame(onFrame);