จะวาดเส้นหกเส้นโดยเว้นระยะห่างอย่างสมมาตรในรัศมีใน Canvas ได้อย่างไร

ฉันกำลังพยายามสร้างแอปวาดภาพเกล็ดหิมะใน Canvas ซึ่งคล้ายกับสิ่งนี้มาก: http://www.pumpkinpirate.info/ks/.

โดยพื้นฐานแล้ว หากคุณวาดจุด ควรทำซ้ำอีก 5 ครั้งในรูปแบบวงกลมสมมาตรภายในผืนผ้าใบ นี่คือภาพประกอบ:

ฉันรู้วิธีบอกให้ผืนผ้าใบวาดบางสิ่งหลายๆ ครั้ง แต่ทักษะทางคณิตศาสตร์ของฉันมีจำกัด และฉันสงสัยว่าจะคำนวณตำแหน่งของจุดคัดลอก 5 จุดที่สัมพันธ์กับจุดต้นฉบับได้อย่างไร

ฉันกำลังคิดว่าจะต้องหาจุดกึ่งกลางของผืนผ้าใบและคำนวณระยะห่างจากจุดนั้นถึงตำแหน่ง x และ y ของจุดเดิม หลังจากนั้นผมถือว่าบางทีผมต้องหารัศมีว่าจะวาดวงกลมจากจุดนั้นหรือไม่ แล้ว... ก็เป็นช่วงที่หัวผมเริ่มสูบบุหรี่

ฉันสงสัยว่าฉันสามารถทำอะไรบางอย่างที่คล้ายกับสิ่งที่พวกเขาทำที่นี่ได้หรือไม่: สลับพิกัด X และ Y บนแคนวาส HTML5

สำหรับพื้นหลัง เดิมทีฉันเริ่มต้นด้วยผ้าใบที่ถูกตัด 6 ชิ้น โดยที่ 5 ชิ้นถูกหมุนและจะคัดลอกชิ้นแรก แต่ฉันรู้ว่าวิธีนี้ใช้ไม่ได้ผลจริงๆ ส่วนหนึ่งเป็นเพราะผืนผ้าใบจะเหลื่อมกันเล็กน้อย (แต่มีปัญหาอื่นๆ อยู่ด้วย) ด้วย).

นี่คือรหัสที่ฉันมี:

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);
}