Bagaimana cara menggambar enam garis dengan jarak simetris dalam radius di Canvas?

Saya mencoba membuat aplikasi menggambar kepingan salju di Canvas, sangat mirip dengan ini: http://www.pumpkinpirate.info/ks/.

Pada dasarnya, jika Anda menggambar sebuah titik, itu harus diulangi 5 kali lagi dalam pola lingkaran simetris di dalam kanvas. Berikut ilustrasinya:

Saya tahu cara memberitahu kanvas untuk menggambar sesuatu beberapa kali, tetapi kemampuan matematika saya terbatas dan saya bertanya-tanya bagaimana cara menghitung posisi 5 titik yang disalin dalam kaitannya dengan titik aslinya.

Saya berpikir bahwa saya harus mencari bagian tengah kanvas dan menghitung jarak dari titik tersebut ke posisi x dan y dari titik aslinya. Setelah itu saya berasumsi mungkin saya harus mencari jari-jari jika saya menggambar lingkaran dari titik itu dan kemudian... saat itulah kepala saya mulai berasap.

Saya ingin tahu apakah saya dapat melakukan hal serupa dengan apa yang mereka lakukan di sini: Balikkan koordinat X dan Y pada kanvas HTML5

Sekadar latar belakang, saya awalnya memulai dengan 6 kanvas terpotong di mana 5 diputar dan akan menyalin yang pertama, tetapi saya menyadari bahwa pendekatan ini tidak benar-benar berhasil, sebagian karena kanvas akan sedikit tumpang tindih (tetapi ada masalah lain) juga).

Berikut kode yang saya miliki sejauh ini:

drawing = false;
startX = 0;
startY = 0;
imageData = null;

const canvas = document.getElementById("canvas");

canvas.addEventListener("mousedown", startPosition());
canvas.addEventListener("mouseup", endPosition());
canvas.addEventListener("mousemove", draw());

function startPosition(e) {
  const canvas = this;
  const ctx = canvas.getContext("2d");

  startX = e.clientX;
  startY = e.clientY;
  imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
  drawing = true;
}

function endPosition(e) {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  ctx.lineWidth = 4;
  ctx.lineCap = "round";
  ctx.moveTo(startX, startY);
  ctx.lineTo(e.clientX, e.clientY);
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
  ctx.beginPath();

  drawing = false;
}
function draw(e) {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  if(!drawing) {
    return;
  }

  ctx.putImageData(imageData, 0, 0);
  ctx.lineWidth = 4;
  ctx.lineCap = "round";
  ctx.moveTo(startX, startY);
  ctx.lineTo(e.clientX, e.clientY);    
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);

  //draw line 2
  ctx.moveTo(startX - 50, startY - 50);
  ctx.lineTo(e.clientX - 50, e.clientY - 50);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX - 50, e.clientY - 50);

  //draw line 3
  ctx.moveTo(startX - 100, startY - 100);
  ctx.lineTo(e.clientX - 100, e.clientY - 100);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX - 100, e.clientY - 100);
}