JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="300"></canvas>

JavaScript

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

var dxUser = 3;
var dyUser = 3;

var xFoe1 = 25;
var yFoe1 = 25;

var rightPressed = false;
var leftPressed = false;
var downPressed = false;
var upPressed = false;

var player = { x: 100, dx: 2, y: 100, dy: 2, r: 10};
var rect = {x: 25, dx: 1, y: 25, dy: 1, w: 20, h: 20};

function drawUser() {
  ctx.beginPath();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.arc(player.x,player.y,player.r,0,Math.PI*2);
  ctx.fillStyle = "#ff0000";
  ctx.fill();
  ctx.closePath();
}

function drawRect() {
  ctx.beginPath();
  ctx.rect(rect.x,rect.y,rect.w,rect.h);
  ctx.fillStyle = "#ff1493";
  ctx.fill();
  ctx.closePath();
  rect.x += rect.dx;
}

function draw() {
drawUser();
drawRect();

function collisionDetection(player,rect) {
  var distX = Math.abs(player.x - player.dx - rect.x - rect.w/2);
  var distY = Math.abs(player.y - rect.y - rect.h/2);

  if (distX >= (rect.w / 2 + player.r - player.dx)) {
    return false;
  }
  if (distY > (rect.h / 2 + player.r)) {
    return false;
  }

  if (distX <= rect.w/2) {
    return true;
  }
  if (distY <= rect.h/2) {
    return true;
  }
}

if(collisionDetection(player,rect)) {
  alert("You Lose");
  document.location.reload();
}


if (rect.x + rect.dx > canvas.width-15) {
  rect.dx = -rect.dx;
}
if (rect.x + rect.dx < 10) {
  rect.dx = -rect.dx;
}

//conditionals for determining user key pressing

  if(player.x - player.dx < 10) {
    leftPressed = false;
  }
  if (player.x + player.dx > canvas.width-player.r) {
    rightPressed = false;
  }
  if (player.y - player.dy < 10) {
    upPressed = false;
  }
  if (player.y + player.dy > canvas.height-player.r) {
    downPressed = false;
  }


  if (rightPressed == true) {
    player.x += player.dx;
  }
  if (leftPressed == true) {
    player.x -= player.dx;
  }
  if (downPressed == true) {
    player.y += player.dy;
  }
  if (upPressed == true) {
    player.y -= player.dy;
  }
}

//key press...