Shrinking and growing canvas creates non-passable border
<p>I know this question sounds wierd but I have no clue how to best describe the issue so please follow this link and play the game till you get  score around 15-20 and you will see that once the canvas grows a black line is created kinda splitting the canvas in half
<a href="http://flameforged.altervista.org/games2/snake/" rel="nofollow">Link to game</a></p>

<p>I have no clue weather the issue occurs from javascript or css or what help is much appreciated</p>

<p>Below is all my code for this game</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*
-------------------------
settings.js
-------------------------
*/
var canvas = document.getElementById("snakeCanvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var score = 0;
var snake;
var snakeSize = 10;
var food;

/*
---------------------------
draw.js
---------------------------
*/

var drawModule = (function () { 

  var bodySnake = function(x, y) {
        ctx.fillStyle = 'green';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        ctx.strokeStyle = 'darkgreen';
        ctx.strokeRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
  }

  var pizza = function(x, y) {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        ctx.fillStyle = 'red';
        ctx.fillRect(x*snakeSize+1, y*snakeSize+1, snakeSize-2, snakeSize-2);
  }

  var scoreText = function() {
    var score_text = "Score: " + score;
    ctx.fillStyle = 'blue';
    ctx.fillText(score_text, 145, h-5);
  }

  var drawSnake = function() {
      var length = 4;
      snake = [];
      for (var i = length-1; i&gt;=0; i--) {
          snake.push({x:i, y:0});
      }  
  }
    
  var paint = function(){
      ctx.fillStyle = 'lightgrey';
      ctx.fillRect(0, 0, w, h);
      ctx.strokeStyle = 'black';
      ctx.strokeRect(0, 0, w, h);

      btn.setAttribute('disabled', true);

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

      if (direction == 'right') { 
        snakeX++; }
      else if (direction == 'left') { 
        snakeX--; }
      else if (direction == 'up') { 
        snakeY--; 
      } else if(direction == 'down') { 
        snakeY++; }

      if (snakeX == -1 || snakeX == w/snakeSize || snakeY == -1 || snakeY == h/snakeSize || checkCollision(snakeX, snakeY, snake)) {
          //restart game
          btn.removeAttribute('disabled', true);

          ctx.clearRect(0,0,w,h);
          gameloop = clearInterval(gameloop);
          score = 0;
          h = 350;
          w = 350;
          return;          
        }
        
        if(snakeX == food.x &amp;&amp; snakeY == food.y) {
          var tail = {x: snakeX, y: snakeY}; //Create a new head instead of moving the tail
          score ++;
          
          createFood(); //Create new food
        } else {
          var tail = snake.pop(); //pops out the last cell
          tail.x = snakeX; 
          tail.y = snakeY;
        }
        //The snake can now eat the food.
        snake.unshift(tail); //puts back the tail as the first cell

        for(var i = 0; i &lt; snake.length; i++) {
          bodySnake(snake[i].x, snake[i].y);
        } 
        
        pizza(food.x, food.y); 
        scoreText();
  }

  var createFood = function() {
      food = {
        x: Math.floor((Math.random() * 30) + 1),
        y: Math.floor((Math.random() * 30) + 1)
      }

      for (var i=0; i&gt;snake.length; i++) {
        var snakeX = snake[i].x;
        var snakeY = snake[i].y;
      
        if (food.x===snakeX &amp;&amp; food.y === snakeY || food.y === snakeY &amp;&amp; food.x===snakeX) {
          food.x = Math.floor((Math.random() * 30) + 1);
          food.y = Math.floor((Math.random() * 30) + 1);
        }
      }
  }

  var checkCollision = function(x, y, array) {
      for(var i = 0; i &lt; array.length; i++) {
        if(array[i].x === x &amp;&amp; array[i].y === y)
        return true;
      } 
      return false;
  }

  var init = function(){
      direction = 'down';
      drawSnake();
      createFood();
      gameloop = setInterval(paint, 80);
  }


    return {
      init : init
    };

    
}());

/*
-------------------
app.js
-------------------
*/

(function (window, document, drawModule, undefined) {

var btn = document.getElementById('btn');
btn.addEventListener("click", function(){ drawModule.init();});

 document.onkeydown = function(event) {

        keyCode = window.event.keyCode; 
        keyCode = event.keyCode;

        switch(keyCode) {
        
        case 37: 
          if (direction != 'right') {
            direction = 'left';
          }
          console.log('left'); 
          break;

        case 39:
          if (direction != 'left') {
          direction = 'right';
          console.log('right');
          }
          break;

        case 38:
          if (direction != 'down') {
          direction = 'up';
          console.log('up');
          }
          break;

        case 40:
          if (direction != 'up') {
          direction = 'down';
          console.log('down');
          }
          break;
          }
      }


})(window, document, drawModule);


/*
---------------------
enhancements.js
---------------------
*/

function UpdateCanvas(){
 if(score == 0){
     w = 350;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },2000);
    }else if(score &gt;= 5 &amp;&amp; score &lt; 8){
     w = 500;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },2000);
    }else if(score &gt;= 8 &amp;&amp; score &lt; 10){
     w = 500;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },2000);
    }else if(score &gt;= 10 &amp;&amp; score &lt; 12){
     w = 600;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },2000);
    }else if(score &gt;= 12 &amp;&amp; score &lt; 15){
     w = 850;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },2000);
    }else if(score &gt;= 15 &amp;&amp; score &lt; 18){
     w = 400;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },1000);
    }else if(score &gt;= 18 &amp;&amp; score &lt; 21){
     w = 250;
        h = 350;
  $('#snakeCanvas').animate({
      width: w,
         height: h
     },1000);
    }
}

setInterval(UpdateCanvas,1000);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#home {
      width: 350px;
      height: 350px;
      background-image: url('../img/snake.png');
      background-size: auto 350px;
      background-repeat: no-repeat;
      background-color: lightblue;
      background-position: center center;
      padding: 0;
      margin: 03;

    }
    
    button {
      background-color: green;
      color: white;
      border: none;
      bottom: 0;
      height: 30px;
      font-size: 12pt;
      float: left;
      width: 90px;
      margin: 10px 0 0 0;
    }
    button:hover {
      background-color: orange;
    }

    button:disabled {
      background-color: grey;
    }

    p {
      font-family: Helvetica;
      font-weight: bold;
      width: 250px;
      margin: 18px 0 5px 8px;
      float: left;
    }

    .game {
      margin: 0 auto;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Snake: Remastered&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/Style.css"&gt;
    &lt;script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class= 'game'&gt;
  &lt;div id = 'home'&gt;
   &lt;canvas id='snakeCanvas' width='350' height='350'&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;p&gt;Press start and eat the pizza!&lt;/p&gt;
  &lt;button id='btn'&gt;START&lt;/button&gt;
 &lt;/div&gt;
    
    &lt;script src="js/settings.js"&gt;&lt;/script&gt;
    &lt;script src="js/draw.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/enhancements.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>