twobomb

Поставьте код

var head = {
      x: px,
      y: py,
    };
    snake.unshift(head);

после

if (px >= canvas.width) {
      px = 0;
    }
    if (px + box < 0) {
      px = canvas.width;
    }
    if (py >= canvas.height) {
      py = 0;
    }
    if (py + box < 0) {
      py = canvas.height;
    }

Потому-что у вас всё по китайски, вы сначала делаете движение,потом добавляете, а потом уже делаете проверки. А нужно все наоборот.
Использование setInterval для gameLoop - зло, никогда так не делайте. Используйте requestAnimationFrame или setTimeout на худой конец.
И вообще структура ужасная не читабельно. Разделите отдельно фукнция просчет физики, отдельно рендеринг не смешивайте и вызывайте в gameloop по порядку всё.

canvas.onclick = function (ev) {
    ctx.fillStyle = "#FF0000AA";
    if (
      ev.offsetX >= 100 &&
      ev.offsetX <= 300 &&
      ev.offsetY >= 100 &&
      ev.offsetY <= 280
    )
      ctx.fillRect(
        Math.floor(ev.offsetX / 20) * 20,
        Math.floor(ev.offsetY / 20) * 20,
        20,
        20
      );
  };

Как вариант

canvas.addEventListener('mousemove', function(event) {
      let scaleFactor = 1150/plan.offsetWidth;
      event = {
        offsetX:event.offsetX*scaleFactor,
        offsetY:event.offsetY*scaleFactor
      }
        for(let i = arr.length - 1; i >= 0; i--) {
...

Метод shift() удаляет первый элемент из массива и возвращает его значение. Этот метод изменяет длину массива.

Также упростил немного

Ну я бы так не делал

Вместо repaintPanel добавьте

colors.forEach(e=>{
  let img = new Image();
  img.src= e.img;
  img.onload = function(){
      e.isLoaded = true;
      if(colors.every(e1=>e1.isLoaded))        
        repaintPanel();
  }
});

P.S. А вообще реализация через setInterval просто ужас, сделайте один игровой цикл и используйте requestAnimationFrame или setTimeout на худой конец
Первое что попалось, ознакомтесь если понятия не имеете что это такое

Потому-что туда не ссылку нужно давать а объект Image.
Типа такого

let img = new Image();
img.src = "https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg",
img.onload = function(){
  ctx.drawImage(img, 0, 0)
}

Сложно. Ну что-то наговнокодил.
Кликай по канвас чтобы ставить точки.
Пример без анимации
Ну и пример с анимацией

Да можно типа такого, только у вас косяк еще тут

let = this.options.data[categ];
            let slice_angle = 2 * Math.PI * val / total_value;

наверно предполагалось let val.., поэтому рисовалось еще не правильно

Даже если бы оно не моргало, то оно бы дергалось и выглядело печально, нужно делать свое управление типа такого

Лет 100 назад писал колор пикер на канвас только как в фотошопе.
Крч почитай про HSV. По сути в квадрате у нас по игрику идет насыщенность(S - saturation) от 0 до 100, по иксу оттенок(H-hue) от 0 до 360, а справа это яркость (V -value) тоже от нуля до ста ( это если как в пеинте как на вашем скрине), функция перевода из hsv в rgb есть в моем примере

Чуть подправил функцию рисования сетки (оставил один beginPath и один stroke) и по крайней мере у меня фпс с 30 вырос до максимально возможных для requestAnimationFrame 60 фпс. Всё это на родном blur фильтре

Если правильно понял, то должно быть типа такого

P.S. Настроить скорость можно через this.animationStep и this.iteratorStep