Павло Пономаренко

для рендеринга присматриваюсь к React+Canvas

Когда делаете что-то на Canvas - нет никакого смысла в Реакте, да и в гейм-деве он будет только мешаться.

Чистый 2д-контекст в JS - очевидно плохое решение всегда, честно.

Отталкивайтесь от целей. Если у вас таргет исключительно на Веб - берите Пикси и делайте отличные быстрые игры.

Если хотите больше платформ - однозначно берите Юнити.

Смотря что вы имеете ввиду под словом "актуален". Актуален как минимум тем, что до сих пор нету более мощного 2d canvas фреймворка)

Добрый день) Проблема скорее всего в том, что по-умолчанию очистка идёт через «boundingRectangle» фигуры.
Попробуйте добавить в ваш класс такой код и скажите, исправился ли баг?

clearPrevious: function (ctx) {
    ctx.clear( this.shape );
}

Как альтернатива — заменить boundingShape:

get currentBoundingShape () {
  return this.shape;
}

По идее любой из этих способов должен помочь.

С точки зрения производительности вместо projectiveImage, который реализуется через множество трансформаций — лучше использовать одну трансформацию. Например, как в топике "Canvas-трансформации доступным языком".

А ещё лучше — загружать уже транформированные картинки (так и дизайнеру легче, имхо). Пример из Civilization3:

Обратите внимание на Урл:
http://marijnhaverbeke.nl/js1k

Это фича нужна для соревнований очень маленького кода. В реальных приложениях, естественно, такую хрень использовать не стоит.

По описанию похоже на LibCanvas. Ну вы пишите, мы почитаем)

Извините, а какая цель?

По производительности — на Андроиде работает ужасно. На АйОси — отлично. На АйОси без аппаратного усскорения- неплохо.

Тестовый стенд: jsfiddle.net/8H24M/

Я сомневаюсь, что вы сможете обмануть политику безопасности браузера.

Буфер тоже можно вертеть) Много цветов — вы имеете ввиду, что много цветов будет или много цветов сейчас? Градиент вообще затратная операция. Таки задумайтесь о кешировании. Я крайне сомневаюсь, что у вас что-то выйдет без него. И сразу же решите проблему с «если один из радиусов градиента выходит за границы холста»

Попробуйте порыться в исходниках quake2-qwt, они как-то реализовали это. Если найдёте решение — сообщите!

Если я просто делаю context.rotate(0.05) то изображение начинает съезжать по какойто странной траектории.

Оно крутится вокруг точки 0:0

В топике, что вам дали выше есть целый абзац про это:

Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами rotate и translate, иначе мы никогда не попадём картинкой в нужное место. Самый простой способ осью вращения выбрать центр картинки и отрисовывать её в координаты (-width/2, -height/2). К примеру, мы хотим развернуть картинку размерами 50х50, находящуюся на координатах 100:100. Указываем translate в координату 125:125 и отрисовываем картинку в координату -25:-25. Альтернатива — использовать LibCanvas и метод rotatedImage(или drawImage в ближайшем будущем) и не напрягаться.

При помощи LibCanvas, который можно скачать с GitHub это будет выглядеть как-то так:

canvas
  .getContext('2d-libcanvas')
  .drawImage({
      image: yourCanvas,
      from : [15, 40],
      angle: (60).degree()
  });

Если использовать расширение Number.prototype.degree из топика, то ваш код может выглядеть так:

function rotatedDrawImage (ctx, image, fromX, fromY, angle) {
    ctx.save();
    ctx.translate(fromX + image.width / 2, fromY + image.height / 2);
    ctx.rotate(angle.degree());
    ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2));
    ctx.drawImage(image, fromX, fromY);
    ctx.restore();
}
rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60);