RAX7

Можно.

как разместить нулевые координаты в центр канваса?

ctx.translate(w/2, h/2); // сдвигаем точку (0, 0) в центр холста

Используй линейный градиент, примерно как здесь: https://jsfiddle.net/RAX7/m2t98cjq/

Скорее всего не учел где-то window.devicePixelRatio

Помимо геометрии тебе пригодится курс линейной алгебры https://www.youtube.com/playlist?list=PLZHQObOWTQD...

Это только один пример, а ведь есть еще и rotate, для которого нужно еще изменять skew, trasnlate....

Все это делается перемножением матриц трансформации, т.е. берутся матрицы: перемещения, вращения, масштабирования и т.д. (translateMatrix, rotateMatrix, scaleMatrix) перемножаются:
transformMatrix = translateMatrix * rotateMatrix * scaleMatrix
и итоговая transformMatrix уже используется в setTransform()

p.s. у канваса есть простые методы для трансформации: rotate, translate и т.д. с помощью которых всё это можно сделать менее заморочено.

1. нужно дождаться загрузки обеих картинок и после этого уже отрисовывать их и вызывать canvas.toDataURL
2. https://developer.mozilla.org/en-US/docs/Web/HTML/...

В HTML атрибутах размер канваса поправь
<canvas id="sig-canvas" width="620" height="160">

Очищай канвас полностью и градиентом дорисовывай хвост

ctx.fillRect(this.body.myPos.x, this.body.myPos.y, 50, 50);

У тебя там все перепутано. Метод drawEllipse принимает координаты, а ты передаешь координаты и размер прямоугольника. К тому же неверно вычисляются центр и радиус эллипса. И посмотри на строки 35-38, линтер неспроста тебе там предупреждение выдает.
Держи исправленный вариант

Почитать про анимации можно тут: https://learn.javascript.ru/js-animation
про рисование на канвасе - https://developer.mozilla.org/ru/docs/Web/API/Canv...

ctx.fillStyle = '#' + (Math.random() * Math.pow(256, 3) | 0).toString(16).padStart(6, '0');

Во первых метод knight в прототипе перекрывается свойством knight

Game.prototype.knight = function(game, gameSize,position){
  this.game = game;
  this.position = {x : 150, y : 150};
  this.size = {x : 200, y : 230};
  this.current = 0;
  this.knight = []; // <----- упс! следующий вызов this.knight() окажется неудачным.
}

Во вторых raf рекурсивно вызывает loadGame, loadGame вызывает knight, knight переписывает объект this.position, поэтому ни х, ни y не изменяются.

В третьих оформляй код в песочнице, чтобы остальным не приходилось делать это за тебя.

// Сам график
ctx.beginPath();