JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<button id="right">right</button>
<button id="down">down</button>
<button id="left">left</button>
<button id="up">up</button>

JavaScript

var canvas= document.querySelector("canvas");
var right=document.querySelector("right");
var left=document.querySelector("left");
var up=document.querySelector("left");
var down=document.querySelector("left");

canvas.width=window.innerWidth;
canvas.height=window.innerHeight-200;
var ctx= canvas.getContext("2d");

width= 20;
height=20;


var snake=[{x:40, y:0}, {x:20, y:0}];




function move(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
  for(var i=0; i<snake.length; i++){
    //lets just say i stands for index number
    ctx.strokeStyle="orange";
    ctx.strokeRect(snake[i].x, snake[i].y, width, height);
    }


  snakex=snake[0].x;
  snakey=snake[0].y;

  snakex+=20;

  var newhead={x:snakex, y:snakey};
  snake.unshift(newhead); 
  snake.pop();
}

setInterval(move, 800);