Как повернуть прямоугольники на своем месте на холст HTML?

Question

У меня возникли проблемы с вращающимися прямоугольниками на холсте HTML на их месте. Как вы можете видеть в JS Fiddle, исходное изображение показано здесь: https://jsfiddle.net/vyx2hbky/. То, что я хочу сделать, это слегка повернуть линии, скажем, на 45 градусов, вместо них.

Когда я раскомментировать комментируемой код в JS Fiddle, что это,

ctx.translate(coords[0], coords[1]); 
ctx.rotate(Math.PI/4); 

все оригинальные прямоугольники забарахлить, и это выглядит как беспорядок. Они не вращаются в своем собственном месте, и я не совсем уверен, как это исправить.

Я рассмотрел предыдущие вопросы о переполнении стека относительно вращающихся прямоугольников в их центральной точке, но я не уверен, как найти центральную точку каждого отдельного прямоугольника, и как я могу воспроизвести этот процесс для каждого одиночный прямоугольник в холсте.

Я попытался сделать ctx.translate(coords[0] + c.width/2, coords[1] + c.height/2), как и в некоторых предыдущих ответах переполнения стека, но это, похоже, не работает. Любое руководство будет оценено!

Answer 1

Попробуйте сделать это, только после того, как "вар COORDS = dotPositions [я];":

ctx.save(); 
    ctx.translate(coords[0]+5, coords[1]); 
    ctx.rotate(Math.PI/4); 
    ctx.rect(-5, 0, 10, 0); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore();