JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="border:1px solid black;">Please use a browser that supports the canvas element, and Javascript.</canvas>
<span id="test"></span>

JavaScript

//Get canvas context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var directionChanged=false;
var keys = [];
document.onkeydown = function(e){keys[e.keyCode]=true;
	if(!directionChanged){
  	if(keys[37]&&direction!=1){
    		direction=3;
  	} else if(keys[38]&&direction!=2){
    		direction=0;
  	} else if(keys[39]&&direction!=3){
    		direction=1;
  	} else if(keys[40]&&direction!=0){
    		direction=2;
  	}
    directionChanged=true;
  }
};
document.onkeyup = function(e){
	keys[e.keyCode]=false;
};

var snakeArray=[[-1,7],[-1,7],[-1,7]];
var headX=0;
var headY=7;
var foodX=15;
var foodY=7;
var direction=1;
function main(){
	directionChanged=false;
  if(direction==0){
  	headY--;
  }
  if(direction==1){
  	headX++;
  }
  if(direction==2){
  	headY++;
  }
  if(direction==3){
  	headX--;
  }
  if(headX<0){
  	headX=29;
  }
  if(headX>29){
  	headX=0;
  }
  if(headY<0){
  	headY=14;
  }
  if(headY>14){
  	headY=0;
  }
  /*for(var i=0;i<snakeArray.length-1;i++){ //Minus one because of the way I add to the tail when food is gotten (I add it under the head); it's impossible to hit the tail right behind you anyways.
  	if(headX==snakeArray[i][0]&&headY==snakeArrray[i][1]){
    	alert("you lose!");
    }
  }*/
  for(var i=0;i<snakeArray.length;i++){
  	if(headX==snakeArray[i][0]&&headY==snakeArray[i][1]){
    	clearInterval(interval);
    }
  }
  
  if(headX==foodX&&headY==foodY){
	
  	/*for(var i=snakeArray.length/\*-1*\/;i>=0;i--){
    	if(i!=snakeArray.length-1){
    		snakeArray[i+1]=snakeArray[i];
    	} else {
    		snakeArray.push(snakeArray[i]);
    	}
  	}*/
    snakeArray[0]=[foodX,foodY];
    
    snakeArray.push([headX,headY]);
    foodX=Math.floor(Math.random()*30);
    foodY=Math.floor(Math.random()*15);
    /*outerloop: while(true){ //Prevent food from spawning on tail; but it's too laggy :(
    	for(var i=0;i<snakeARray.length;i++){
        	if(foodX==snakeArray[i][0]&&foodY==snakeArray[i][1]){
           ...