Jak uniknąć powtórzeń przy rysowaniu kilku łamanych w canvas?

Cześć!
Chciałbym napisać funkcie która ma rysować w canvas cztery łamane
w rogach danego kwadratu.

Napisałem fukcje która robi to dla jednego boku:

function drawSelection(x, y, cWidth) {
  const padding = 3;
  const widthRatio = 0.3;
  c.beginPath();
  c.moveTo(x + padding + cWidth * widthRatio, y + padding);
  c.lineTo(x + padding, y + padding);
  c.lineTo(x + padding, y + padding + cWidth * widthRatio);
  c.stroke();
}

gdzie cWidth to szerokość kwadratowej komórki.
x, y to początek kwadratu.

Jest to jednak tylko lewy górny róg.
Chciałbym to zrobić dla wszystkich rogów bez pisania cztery razy podobnych instrukcji.
Czy macie jakieś pomysły? :-)

Pytanie jak będą się zmieniać wartości dla każdego boku.
Jak się domyślam, padding może być ujemny dla tych dalszych rogów?

c.lineTo(x + padding, y + padding);

czyli jak tutaj jest padding = 3, to masz efektywnie x + 3, y + 3, to dla przeciwległego rogu będzie x + (-3), y + (-3), a dla dwóch pozostałych: x + 3, y + (-3) oraz x + (-3), y + 3?

No to już masz jakąś bazę do iteracji.
Tak samo pewnie adekwatnie będą się zmieniać wartości cWidth * widthRatio na ujemne? (bo jeśli mając lewy górny rog to musisz dodać padding, a jak masz prawy górny róg to musisz odjąć padding albo innymi słowy - padding staje się ujemny).

coś jak:

const padding = 3;
 for (let directionX = -1; directionX <= 1; directionX += 2) 
   for (let directionY = -1; directionY <= 1; directionY+=2) {  
       const paddingX = padding * directionX;
       const paddingY = padding * directionY;
       ........ 
       // cWidth * (directionX + 1) / 2  - żeby przy dwóch prawych rogach dodał wartość cWidth do pozycji x
      // mógłbyś też coś takiego napisać: (directionX == -1? cWidth : 0)
       // no i nie wiem, czy dokładnie te wszystkie obliczenia są poprawne (to już sobie sprawdzisz 
      // i dostosujesz, ale chodzi mi o ogólne podejście
       c.moveTo(x + cWidth * (directionX + 1) / 2  + cWidth * widthRatio * directionX + paddingX, 
                       y + paddingY); 
       ... pozostałe linijki podobnie. 
   }

Na tę modłę, zależy, co tam chcesz dokładnie osiągnąć. Żeby mieć jakieś proste zmienne sterujące kierunkiem rysowania (np. lewy górny róg - w dół i w prawo; prawy górny róg - w dół i w lewo itp.), które będą przybierać wartości:
-1, -1
-1; 1
1; -1
1; 1
i potem używać tych wartości do tego, żeby mnożyć przez nie padding czy inne zmienne.

Wygląda typowe zastosowanie grafiki żółwia (turtle graphics), z rysowaniem opartym na komendach:
opuść pióro, podnieś pióro, obróć N stopni, przesuń N kroków.

To też w sumie, zależy w jaki sposób do tego podejść.

Jeśli zajdzie potrzeba obracania, to w Canvas jest metoda rotate:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate