Dikdörtgenleri HTML tuvalindeki yerlerinde nasıl döndürürüm?

Question

HTML kanvasında yer alan dikdörtgenleri döndürmede sorun yaşıyorum. JS Fiddle'da görebileceğiniz gibi, orijinal görüntü burada gösterilmektedir: https://jsfiddle.net/vyx2hbky/. Yapmak istediğim, satırları hafifçe çevirip, 45 derece gibi, onların yerine.

bunun ne JS Fiddle, yorumlanmış kod yorumsuz

,

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

orijinal dikdörtgenler tüm sapıtmak ve bir karmaşa gibi görünüyor. Kendi noktalarında dönmüyorlar ve bunu nasıl düzelteceğime emin değilim.

Dönen dikdörtgenlerin merkez noktalarına ilişkin önceki Yığın Taşması sorularına baktım, ancak başlangıçta her bir dikdörtgenin merkez noktasını nasıl bulacağımı ve bu işlemi her biri için nasıl çoğaltabileceğimi bilmiyorum. Tuvalde tek dikdörtgen.

Bazı önceki Yığın Taşması yanıtlarına göre ctx.translate(coords[0] + c.width/2, coords[1] + c.height/2) yapmayı denedim, ancak bu işe yaramaz. Herhangi bir rehberlik takdir edilecektir!

Answer 1

deneyin "[i] var coords = dotPositions;" hemen sonra, bunun için:

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