JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<CANVAS id="canvas" width="350" height="350"></CANVAS>
<SPAN STYLE="COLOR:RED">UP DOWN LEFT OR RIGHT KEY</SPAN>
<SPAN STYLE="COLOR:ORANGE">MOTHERFUCKER</SPAN>
<SPAN STYLE="COLOR:#FFCA00">DID</SPAN>
<SPAN STYLE="COLOR:GREEN">YOU</SPAN>
<SPAN STYLE="COLOR:BLUE">PRESS</SPAN>
<SPAN STYLE="COLOR:#6C0AAB">IT?</SPAN>

CSS

span {
    display: block;
    text-align: center;
    font: bold 30px "Comic Sans MS";
}

JavaScript

(function render() {
    var side = 40,
        stage = new createjs.Stage('canvas'),
        graphics = new createjs.Graphics(),
        shape = new createjs.Shape(graphics);
        
    graphics.beginFill('rgba(150, 118, 255, 0.4)')
            .setStrokeStyle(8)
            .beginStroke('rgba(0, 118, 255, 0.8)')
            .rect(0, 0, side, side);
    
    shape.x = canvas.width / 2;
    shape.y = canvas.height / 2;
    
    stage.addChild(shape);
    stage.update()
    

    var KEYCODE_LEFT = 37, 
		KEYCODE_RIGHT = 39,
		KEYCODE_UP = 38, 
		KEYCODE_DOWN = 40;
    document.onkeydown = tick;
    function tick(event) {
        switch(event.keyCode) {
                case KEYCODE_LEFT:
                    shape.x -= 4;
                    break;
                case KEYCODE_RIGHT:
                    shape.x += 4;
                    break;
                case KEYCODE_UP:
                    shape.y -= 4;
                    break;
                case KEYCODE_DOWN:
                    shape.y += 4;
                    break;
        }        
        stage.update(event);
    }
}())