Canvas и не понятные "подергивания"
 

Добрый день!
Узнал я что на JS можно сделать игру для браузера прямо в блокноте и мне захотелось попробовать :) .
Прочитал документацию и написал не много кода, но заметил при движении тестовой фигуры (черный квадрат) какие то рывки и подергивания как будто бы играем в сетевую игру с большим пингом или слабенькой сетевой оптимизацией. Погуглил не много и понял что возможно это какая то локальная проблема с компом или софтом и прошу вас посмотреть мой код. Вдруг все же я где то допустил ошибку.
http://jsbin.com/gosovane/1/edit

Код смотреть не обязательно

Я так понимаю что то не удаляется?

Может кто нибудь подскажет куда смотреть и как исправить?

Скрипт создает много новых объектов вместо того что бы использовать старые объекты.
Периодически вызывается сборщик мусора который работает 30-50 милисек
Смотреть в отладчик хрома вкладка timeline на ней включить запись.
там очень подробно в картинках и графиках показано что и как работает

1 смени setInterval на setTimeout - есть разница в работе при совпадении событий , и описана также в учебнике на этом сайте
2 используй requestAnimationFrame http://habrahabr.ru/post/114358/
3 тереть всю канву? тебе ресурсы и нагрузка позволят в дальнейшем? - задумайся о колве объектов и т.д (как вариант, если у тебя нет накладок, оставь пустые поля вокруг объекта и пусть при перерисовке он сам затирает своё прошлое состояние)

В целом не плохо. То что ты используешь вычисленные величины в основной массе это плюс.

MallSerg, и каким боком твои "умозаключения" к реальности ?

"немного" и "непонятные" - пишется слитно

дальше не читал и не проверял

что-то - пишется через дефис

товарищи начинающие программисты!
надо внимательней к синтаксу языка

Да вы что...