Как нарисовать шесть линий, симметрично расположенных по радиусу в 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);
}