JavaScript - moving object to a new location -

i'm writing simple "snake" game , i'm facing issue: every tame snake hits red circle (apple) , apple should moved new location on canvas. right new apple appears, old 1 not disappear ( should) , , when there more 2 apples on canvas create filled figure... looks this: ibb.co/nrydlq (also shouldn't happen).

the code responsible moving apple this:

if (!this.objectcollide(myapple)) {     this.segments.pop();   } else {     myapple = new block(math.floor(math.random() * gamefield.width),math.floor(math.random() * gamefield.height))   }; 

and have no idea why it's working described above, instead moving apple new location , removing old one. please help.

jsfiddle: https://jsfiddle.net/e1ga0fpm/

full javascript code:

var gamefield = document.getelementbyid('gamefield'); var ctx = gamefield.getcontext("2d"); var blocksize = 10; columnct = gamefield.width / blocksize; rowsct = gamefield.height / blocksize;  var block = function(x, y) {   this.x = x;   this.y = y; }  block.prototype.drawblock = function() {   ctx.fillstyle = "blue";   ctx.fillrect(this.x * blocksize, this.y * blocksize, blocksize,     blocksize); };  block.prototype.drawapple = function() {   ctx.fillstyle = "red";   ctx.textbaseline = "bottom";   ctx.arc(this.x, this.y, 6, 2 * math.pi, false);   ctx.fill(); }  var snake = function() {   this.segments = [new block(20, 20), new block(19, 20), new block(18, 20), new block(17, 20),     new block(16, 20), new block(15, 20), new block(14, 20), new block(13, 20), new block(12, 20),     new block(11, 20), new block(10, 20)   ];   this.direction = "right"; }  snake.prototype.drawsnake = function() {   (i = 0; < this.segments.length; i++) {     this.segments[i].drawblock();   } }  snake.prototype.setdirection = function(dir) {   if (this.direction == "left" && dir == "right" || this.direction == "right" && dir == "left" || this.direction == "up" && dir == "down" ||     this.direction == "down" && dir == "up") {     return   } else {     this.direction = dir;   }; };  snake.prototype.objectcollide = function(obj) {   if (this.segments[0].x == math.round(obj.x / blocksize) && this.segments[0].y == math.round(obj.y / blocksize)) {     return true   } else {     return false   } };  snake.prototype.move = function() {   var head = this.segments[0];   var newhead;    switch (this.direction) {     case "right":       newhead = new block(head.x + 1, head.y);       break;     case "left":       newhead = new block(head.x - 1, head.y)       break;     case "down":       newhead = new block(head.x, head.y + 1)       break;     case "up":       newhead = new block(head.x, head.y - 1)       break;   }    this.segments.unshift(newhead);    if (!this.objectcollide(myapple)) {     this.segments.pop();   } else {     myapple = new block(math.floor(math.random() * gamefield.width),math.floor(math.random() * gamefield.height))   };   var collision = newhead.x >= columnct || newhead.x <= -1 ||     newhead.y >= rowsct || newhead.y <= -1;    (i = 1; < this.segments.length; i++) {     if (this.segments[i].x == newhead.x && this.segments[i].y == newhead.y) {       collision = true;       break;     };   };    if (collision) {     clearinterval(myfun);   };  };  var mysnake = new snake() mysnake.drawsnake(); var myapple = new block(math.floor(math.random() * gamefield.width),   math.floor(math.random() * gamefield.height)); var myfun = setinterval(function() {   ctx.clearrect(0, 0, gamefield.width, gamefield.height);   mysnake.move();   mysnake.drawsnake();   myapple.drawapple(); }, 100)  var directions = {   37: "left",   38: "up",   39: "right",   40: "down" };  document.onkeydown = function(event) {   var newdirection = directions[event.keycode]   if (newdirection != undefined) {     mysnake.setdirection(newdirection);   }; 

you forgot beginpath while draw apple. when apple eaten, have add new block snake. check edited code below.

here updated fiddle

block.prototype.drawapple = function() {   ctx.fillstyle = "red";   ctx.textbaseline = "bottom";   ctx.beginpath();   ctx.arc(this.x, this.y, 6, 2 * math.pi, false);   ctx.fill(); } 

var gamefield = document.getelementbyid('gamefield');  var ctx = gamefield.getcontext("2d");  var blocksize = 10;  columnct = gamefield.width / blocksize;  rowsct = gamefield.height / blocksize;    var block = function(x, y) {    this.x = x;    this.y = y;  }    block.prototype.drawblock = function() {    ctx.fillstyle = "blue";    ctx.fillrect(this.x * blocksize, this.y * blocksize, blocksize,      blocksize);  };    block.prototype.drawapple = function() {    ctx.fillstyle = "red";    ctx.textbaseline = "bottom";    ctx.beginpath();    ctx.arc(this.x, this.y, 6, 2 * math.pi, false);    ctx.fill();    }    var snake = function() {    this.segments = [new block(20, 20), new block(19, 20), new block(18, 20), new block(17, 20),      new block(16, 20), new block(15, 20)    ];    this.direction = "right";  }    snake.prototype.drawsnake = function() {    (i = 0; < this.segments.length; i++) {      this.segments[i].drawblock();    }  }    snake.prototype.setdirection = function(dir) {    if (this.direction == "left" && dir == "right" || this.direction == "right" && dir == "left" || this.direction == "up" && dir == "down" ||      this.direction == "down" && dir == "up") {      return    } else {      this.direction = dir;    };  };    snake.prototype.objectcollide = function(obj) {    if (this.segments[0].x == math.round(obj.x / blocksize) && this.segments[0].y == math.round(obj.y / blocksize)) {      return true    } else {      return false    }  };    snake.prototype.move = function() {    var head = this.segments[0];    var newhead;      switch (this.direction) {      case "right":        newhead = new block(head.x + 1, head.y);        break;      case "left":        newhead = new block(head.x - 1, head.y)        break;      case "down":        newhead = new block(head.x, head.y + 1)        break;      case "up":        newhead = new block(head.x, head.y - 1)        break;    }      this.segments.unshift(newhead);      if (!this.objectcollide(myapple)) {      this.segments.pop();    } else {      myapple = new block(math.floor(math.random() * gamefield.width), math.floor(math.random() * gamefield.height));      this.segments.push(new block(this.segments[0][0], 20))    };    var collision = newhead.x >= columnct || newhead.x <= -1 ||      newhead.y >= rowsct || newhead.y <= -1;      (i = 1; < this.segments.length; i++) {      if (this.segments[i].x == newhead.x && this.segments[i].y == newhead.y) {        collision = true;        break;      };    };      if (collision) {      clearinterval(myfun);    };    };    var mysnake = new snake()  mysnake.drawsnake();  var myapple = new block(math.floor(math.random() * gamefield.width),    math.floor(math.random() * gamefield.height));  var myfun = setinterval(function() {    ctx.clearrect(0, 0, gamefield.width, gamefield.height);    mysnake.move();    mysnake.drawsnake();    myapple.drawapple();  }, 100)    var directions = {    37: "left",    38: "up",    39: "right",    40: "down"  };    document.onkeydown = function(event) {    var newdirection = directions[event.keycode]    if (newdirection != undefined) {      mysnake.setdirection(newdirection);    };  };

canvas {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    border: 5px solid grey;  }

<canvas id="gamefield" height="500" width="500">  </canvas>