Нам нужно сделать так чтобы джойстик двигался за мышью даже когда она выходит за круг, но в то же время чтобы сам маленький кружок thumb не выходил за большой круг. Напишем вот такой код:

onMouseDown(() => {
        thumb.pos = mousePos().sub(this.pos)
        if (this.pos.dist(mousePos()) < outer.radius) {
          outer.outline.color = BLACK
        }
        else {
          thumb.pos = thumb.pos.unit().scale(outer.radius)
          outer.outline.color = RED
        }
      })

Теперь разберём, что изменилось. Во первых мы вынесли строчку

thumb.pos = mousePos().sub(this.pos)

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

outer.outline.color = BLACK

эта строчка изменяет цвет обводки внешнего круга на чёрный и работает она в паре с другой строчкой ниже,

outer.outline.color = RED

которая делает обводку красной, это нужно просто для визуального информирования игрока о том что он слишком сильно отклонил стик, по сути просто элемент дизайна, можете это не писать. Подробнее про работу с обводкой kaboomjs.com/#Outline . Далее самая интересная строчка

thumb.pos = thumb.pos.unit().scale(outer.radius)

это опять работа с векторами из тригонометрии.

unit()

- делает длину вектора равной единице, можете забить в гугл "нормализация вектора" и узнать как это делается там ничего сложного. Далее

scale(outer.radius)

- это умножение вектора на радиус большого круга. Мы просто фиксируем длину отрезка от центра джойстика до края большого круга, при этом сохраняя изменение направления вектора, когда позиция мыши вне круга джойстика. Надеюсь нормально объяснил) В документации это всё на той же странице kaboomjs.com/#Vec2 .
Теперь просто зайдите и покрутите джойстиком всё должно работать.