JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Simple Game</title>
    </head>

    <body onload="init();">
        <canvas id='canvas' width="300" height="300">Canvas</canvas>
        <script>var tri = {
    pos: {
        x: 150,
        y: 300
    },
    acceleration: 1,
    velocity: {
        x: 0,
        y: 0
    },
    rotation: 0,
    orientation: 0,
    rotationSpeed: (Math.PI * 2) / 30,
    throttle: false,
    currentSpeed: 0,
    maxSpeed: 5
};

document.onkeydown = function(event) {

    if (!event.keyCode) {
        keycode = window.event.keyCode;
    } else {
        keycode = event.keyCode;
    }
    console.log(event.keyCode);
    switch (keycode) {
        //left
    case 37:
        tri.rotation = -1;
        break;

        //up
    case 38:
        tri.throttle = true;
        break;

        //right
    case 39:
        tri.rotation = 1;
        break;

        //down
    case 40:
        tri.currentSpeed = 0;
        break;

    default:
        break;
    }
};

document.onkeyup = function(event) {

    if (!event.keyCode) {
        keycode = window.event.keyCode;
    } else {
        keycode = event.keyCode;
    }
    console.log(event.keyCode);
    switch (keycode) {
        //left
    case 37:
        tri.rotation = 0;
        break;

        //up
    case 38:
        tri.throttle = false;
        break;

        //right
    case 39:
        tri.rotation = 0;
        break;

        //down
    case 40:

        break;

    default:
        break;
    }
};

function init() {

    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        setInterval(play, 50);
    }
}

function play() {
    printTriState();
    updateTriAcceleration();
    applyTriVelocity();
    updateTriRotation();
    draw();
}

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    triX = tri.pos.x;
    triY = tri.pos.y;

    ctx.save();
    ctx.clearRect(0, 0, 300, 300); // clear canvas
    ctx.save();
   ...

CSS

body {
    margin:0px;
    padding:0px;
    text-align: center;
}

canvas{
    outline:0;
    border:1px solid #000;
    margin-left: auto;
    margin-right: auto;
}