To, że skacze po ekranie to normalne, bo tak zaprogramowałeś (a nie ma tu żadnego tweeningu, więc jak dodasz ileś pikseli do ostatniej pozycji, to ci skacze po ekranie).
Chociaż czasem w grach są takie smugi ruchu (nie wiem jak to nazwać, ale chodzi o złudzenie, że coś się rusza za pomocą wyrenderowania takich smug za obiektami edit: zdaje się, że to "motion blur").
Możesz też zastosować easing, i będzie bardziej płynnie się odbijał.
Chyba, że ci chodzi o gubienie klatek albo przeskoki w renderingu, ale jeśli tak to raczej problem z wydajnością i mógłbyś:
- zoptymalizować istniejący kod (np. czy musisz odpalać
ctx.clearRect
do całego canvasa, nawet jeśli wiesz, że tylko kawałek zmieniasz?)
- zmienić technikę renderingu, np. pójść w WebGL, albo spróbować jakby to poszło na zwykłych divach z użyciem transform(), czy nie byłoby płynniej
- jest jeszcze taka kwestia, że zawsze dodajesz tę samą liczbę pikseli. Natomiast nie wiesz tak naprawdę ile czasu upłynęło od ostatniego renderingu. Więc może się tak zdarzyć, że będzie jakaś zamuła procesora i nowa klatka odpali się po dłuższym czasie. W takim układzie to, co mógłbyś zrobić to np. liczyć ile milisekund upłynęło od ostatniego renderingu i potem wziąć tę liczbę milisekund i pomnożyć przez ustaloną szybkość w pikselach na milisekundę. Wtedy bardziej "równo" by to jechało przynajmniej