Why are my buttons not showing up

My HTML:


<html>
 <head>  
 </head> 
 <body> 
  <canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;"> 
   <div id="box" align="center"> 
    <button id="up">↑</button> 
    <br> 
    <button id="left">←</button> 
    <button id="down">↓</button> 
    <button id="right">→</button> 
   </div> 
  </canvas>   
 </body>
</html>

My css:

  width: 100%
}

 user-select:none;

My JavaScript:

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

var x = 0;
	var y = 100;
	var t = Date.now();
	var speed = 400;
	
	function draw(){
		var timePassed = (Date.now() - t) / 1000;		
		t = Date.now();
		var fps = Math.round(1 / timePassed);
		
	ctx.clearRect(0,0,600,400);

		ctx.beginPath();
		ctx.rect(x,y,100 ,100);
		ctx.font = "12px Arial";
		ctx.fillText("FPS: " + fps , 20 , 30);
		ctx.fillStyle = "brown";
		ctx.fill();
		 
	if (i == 1 && x+100 < 600) { 
		x += (speed * timePassed);
	}
	else if (i == 2 && x > 0) {
		x -= (speed * timePassed);
	}
	else if (i == 3 && y+100 < 400) {
		y += (speed * timePassed);
	}
	else if (i == 4 && y > 0) {
		y -= (speed * timePassed);
	}
	
		
		window.requestAnimationFrame(draw);
	}
window.onload = init
		function init() {
		  window.requestAnimationFrame(gameloop)
		}
		function gameloop() {
		  window.requestAnimationFrame(draw)
		}
		var i = 0;
		
let up = document.getElementById("up");
	let left = document.getElementById("left");
	let right = document.getElementById("right");
	let down = document.getElementById("down");
	
	up.ontouchstart = function() {
		i = 1;
	}
	up.ontouchend = function() {
		i = 0;
	}
	
	
	left.ontouchstart = function() {
		i = 2;
	}
	left.ontouchend = function() {
		i = 0;
	}
	
	
	
	right.ontouchstart = function() {
		i= 3;
	}
	right.ontouchend = function() {
		i = 0;
	}
	
	
	down.ontouchstart = function() {
		i = 4;
	}
	down.ontouchend = function() {
		i = 0;
	}