JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas" width="600" height="600"></canvas>

JavaScript

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var keys = new Array();

var player = {
    x: 300,
    y: 200,
    width: 16,
    height: 16,
    xvel: 0,
    yvel: 0,
};

var box = {
    x: 100,
    y: 100,
    width: 100,
    height: 50,

};

function collision() {
    var bx = box.x;
    var by = box.y;
    var bw = box.width;
    var bh = box.height;

    var boxCenterX = bx + (bw / 2);
    var boxCenterY = by + (bh / 2);

    var playerCenterX = player.x + player.xvel + (player.width / 2);
    var playerCenterY = player.y + player.yvel + (player.height / 2);

    //left = negative and right = positve, 0 = middle
    var distanceXin = playerCenterX - boxCenterX;
    var distanceYin = playerCenterY - boxCenterY;

    var distanceWidth = Math.abs(distanceXin);
    var distanceHeight = Math.abs(distanceYin);

    var halfWidths = (bw / 2) + (player.width / 2);
    var halfHeights = (bh / 2) + (player.height / 2);

    if (distanceWidth < halfWidths) {
        //xcollision
        if (distanceHeight < halfHeights) {
            //ycollision                                                   
            if (player.xvel == 0) {
                //adjust y
                if (distanceYin > 0) {
                    //bottom
                    player.y = by + bh;
                    player.yvel = 0;
                } else {
                    player.y = by - player.height;
                    player.yvel = 0;
                }
            } else if (player.yvel == 0) {
                //adjust x
                if (distanceXin > 0) {
                    //right
                    player.x = bx + bw;
                    player.xvel = 0;
                } else {
                    //left
                    player.x = bx - player.width;
                    player.xvel = 0;
                }
            } else {
                var yTime = distanceYin / player.yvel;
                var xTime = distanceXin / player.xvel;

         ...