JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="1700" height="200"></canvas>

JavaScript

var canvas = $("canvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle="rgba(0,0,0,0.2)"
ctx.textBaseline = "center";
var fonts = ["Arial", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Lucida Console", "Lucida Sans Unicode", "Palatino Linotype", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]
var alph = "abcdefghijklmnopqrstuvwxyz".split("");
var ALPH = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
fonts.forEach(function(f){
  ctx.font = "60px "+f;
  for(var i = 0; i < alph.length; i++){
    ctx.fillText(alph[i], i*60, 75);
  }
  for(var i = 0; i < alph.length; i++){
    ctx.fillText(ALPH[i], i*60, 135);
  }
});