JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>First click in the red canvas below</p>
<p>Then type any lowercase letters from a-z</p>
<br/>
<canvas id="canvas" width=300 height=100></canvas>

CSS

body {
            background-color: ivory;
            padding:20px;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.font = "18px Arial";

        var keyHistory = "";

        window.addEventListener("keyup", keyUpHandler, true);

        function addletter(letter) {
            keyHistory += letter;
            ctx.clearRect(0, 0, 300, 300);
            ctx.fillText(keyHistory, 20, 20);
        }

        function keyUpHandler(event) {
            var letters = "abcdefghijklmnopqrstuvwxyz";
            var key = event.keyCode;
            if (key > 64 && key < 91) {
                var letter = letters.substring(key - 64, key - 65);
                addletter(letter);
            }
        }