JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

    <canvas id='canvas' height="500" width="1000"></canvas>
    <script>
    
        // Initial Global Variables
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var xspeed = 10;
        var yspeed = 0;
        var speed = 10;
        var color = 'red';
        var size = 10;
        var interval;
        //------------------------
        
        //snake object, handles coordinates for each segment and clears the canvas after drawing each segment
        function snake(segments){
            this.segments = segments;
            //'add function is called whenever snake collides with target.
            this.positions = [];
            
        this.collide = function(){
                for(var z=0; z<this.positions.length-1; z++){
                    console.log(this.positions.length);
                    for(var q=z+1; q<this.positions.length-1; q++){
                        return this.positions[z][0] == this.positions[q][0] && this.positions[z][1] == this.positions[q][1];
                    }
                }
                            
                            
            }
            
            this.add = function(){
                this.segments.push(new segment(this.segments[this.segments.length-1].xPos-size, this.segments[this.segments.length-1].yPos, false, size, color));
            }
            
            this.draw = function(){
                if(this.collide()){
                    initiate();
                }
                this.positions.length = 0;
                canvas.width = canvas.width;
                context.fillStyle = 'white';
                context.strokeStyle =...