twobomb

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

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

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

Про колижины

Он вставляет прозрачным. Что такое по вашему прозрачность?
Измените фон страницы на красный и он будет красным, а не белым
P.S. Может вы ожидали что в этом квадрате будет видна стенка за монитором?
P.P.S. Достаточно было написать imgMap.data[i+3] = 0; , остальные не имеют значения когда нет альфы

Крч грубо сделал, разбивает на квадратные части и колизия тож по квадратам,а не по контуру. Количество частей разбивки можно переменной настроить. Зато без всяких библиотек

Накидал пример, еще добавь чтобы поворот зависил от скорости чтобы когда выше скорость был плавнее, а чем меньше тем реще, и сейчас поворот идет относительно середине машины, а должен относительно задних колес если поворачивает передними, нужно drawRect смещать не к центру машины, а к задним колесам.

Вариант 1 через смещение матрицы

ctx.save();
  ctx.translate(50,0); // тут координаты смещения
	ctx.beginPath();
  ctx.moveTo(0,100);
  ctx.lineTo(200,100);  
  ctx.lineTo(100,0);  
  ctx.closePath();
  ctx.fill();
  ctx.restore();

Вариант 2 через переменные смещения

var offX = 300;//по х
  var offY = 50;//по у
	ctx.beginPath();
  ctx.moveTo(offX+0,offY+100);
  ctx.lineTo(offX+200,offY+100);  
  ctx.lineTo(offX+100,offY+0);  
  ctx.closePath();
  ctx.fill();

function drawMyLine(x,y,angleDeg,length){//Угол в градусах
	var angle = angleDeg * Math.PI/180;
	ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x + Math.cos(angle)*length,y + Math.sin(angle)*length);  
  ctx.stroke();
}

Измени

const length = 250;
const moveOffset = 20;

на

var length = 250;
var moveOffset = 20;

Константы на то и константы, чтобы их нельзя было менять

var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 
			var img = new Image();
      var imgT = new Image();
      var loaded = 0;
			img.src = "https://img.rosbalt.ru/photobank/1/c/a/0/Z8X2VMCx.jpg";
      imgT.src = "http://zabavnik.club/wp-content/uploads/background_html_1_16082041.jpg"
      imgT.onload = img.onload = function() {
      	if(++loaded == 2)
        	draw();
      };
      
      function draw(){
        context.drawImage(imgT, 300, 400,200,200);      
        context.drawImage(img, 0, 0);             
           console.log(canvas.toDataURL());

      }

P.S. Могут валиться ошибки корса и прочие если изображения лежат не на вашем хосте

Накидал настраиваемый эффект, при желании можно самому задать массив dots если хотите чтобы линии шли как-то конкретно, или поиграться с параметрами. Тоже самое с окружностями.

https://jsfiddle.net/twobomb/v2dsyfz0/

https://jsfiddle.net/twobomb/rayoedb9/

Не увидел в вашем примере змейки, поэтому решил добавить

...
ctx.fillStyle = "#59982f";
x-=10;
ctx.fillRect(x, y, w, 20);
...

var canvas = getElementByID('GameCanvas');
замени на

var canvas = document.getElementById('GameCanvas');