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

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

function KeyAnimation(keyCode) {
  this.keyCode = keyCode;
  this.char = String.fromCharCode(keyCode);
  this.yOffset = 0;

  this.onFrame = function() {
    this.yOffset -= 1;

    var x = 10 + (this.keyCode - 65) * 22;
    var y = 74 + this.yOffset;

    context.fillText(this.char, x, y);
  }
}

document.addEventListener('keydown', function(event) {
  if (event.repeat) return;
  keyAnimations[event.keyCode] = new KeyAnimation(event.keyCode);
});

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

function onFrame() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  for (var keyCode in keyAnimations) {
    keyAnimations[keyCode].onFrame();
  }

  requestAnimationFrame(onFrame);
}

requestAnimationFrame(onFrame);