проблема для меня была в отсутствии фигурных скобок
непонятно зачем так делать
это ухудшает читаемость

спасибо!

еще просьба и вопрос

как думаешь можно ли такое сделать не на холсте, а двигая дивы через translate3d ?

где теоретически будет выше производительность?

:-?

можно, и даже можно без js.
https://freefrontend.com/css-animated-backgrounds/

я делал через backgroundPosition и очень тормозило

сомневаюсь что можно сделать без js
потому что подобно задаче в этой ветке нужно двигать фон в зависимости от приходящего вектора сдвига

поясни назначение этих переменных:

var dir = {
    vx: 0,
    vy: 0,
    step: 2,
    x: 0,
    y: 0
};

Dabonirc,

var dir = {
    vx: 0,//текущий сдвиг по горизонтали
    vy: 0,//текущий сдвиг по вертикали
    step: 2,//скорость сдвига
    x: 0,// в какую сторону сдвигать по горизонтали
    y: 0// в какую сторону сдвигать по вертикали
};

благодаря тебе уменя всё получилось
смотри демку - https://dvadeshki.ru/d1g1

у меня два холста прокручиваются с разным запаздыванием и с наложением

для старта - энтер
для выхода - эскейп

но не во всех браузерах работает хорошо
в яндекс тормозит
и в фаерфоксе

Если в ФФ включить в настройках аппаратное ускорение, то гораздо лучше идет