Am trying to code snake movement, in my code, it's moving but it's length is increasing, not remaining constant

Question

var brd = document.getElementById("can");

var ctx = brd.getContext("2d");

ctx.width = 600;
ctx.height = 600;
var box =10;

let snake = [];
snake[0]={x:5*box, y:6*box};
snake[1]={x:4*box, y:6*box};
snake[2]={x:3*box, y:6*box};

function drawS() {

for(let i=0;i<snake.length;i++){

ctx.fillStyle = (i==0)?"green":"red"; ctx.fillRect(snake[i].x,snake[i].y,box,box)

}

var snakeX = snake[0].x;
var snakeY = snake[0].y;

snake.pop();

var NewHead = {x:snakeX,y:snakeY+box};

snake.unshift(NewHead);

}

let draw = setInterval(drawS,100);

// snake is array of box,
Am using, snake.pop method to remove last tail peace , and snake.unshift () to add new box on head,

But, it's size is increasing, I want it's size to be constant.

Answer 1

Everything is fine just clean the canvas everytime in the loop before drawing the snake

The trail is just there because of previous render

// Have a ref to canvas elememt
ctx.fillStyle = "#000"; // put your by color
ctx.fillRect(0,0, canvas.width , canvas.height);

Put it in drawS() function at top

Answer 2

A lot thanx, I was stuck, 🙏🏽🙏🏽