1

I'm having some problems rotating rectangles on an HTML canvas in their place. As you can see in the JS Fiddle, the original image is shown here: https://jsfiddle.net/vyx2hbky/. What I want to do is rotate the lines slightly, say by like, 45 degrees, in their place.

When I uncomment the commented code in the JS Fiddle, which is this,

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

all of the original rectangles go haywire and it looks like a mess. They are not rotating in their own spot, and I'm not really sure how to fix this.

I have looked at previous Stack Overflow questions regarding rotating rectangles in their center point, but I'm not really sure how to find the center point of each individual rectangle to begin with, and how I can replicate this process for every single rectangle in the canvas.

I have tried doing ctx.translate(coords[0] + c.width / 2, coords[1] + c.height / 2), as per some previous Stack Overflow answers, but this doesn't seem to work. Any guidance would be appreciated!

Nikhil Sardar
  • 11
  • 2
  • `context.translate(rect.x+rect.width/2,rect.y+rect.height/2)` and then `context.rotate(Math.PI/4)`. After drawing, make sure you reset the transformations with `context.setTransform(1,0,0,1,0,0)`. – markE Apr 01 '16 at 05:37

1 Answers1

2

Try to do this, just after "var coords = dotPositions[i];":

    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();
Devernay Stéphane
  • 151
  • 1
  • 7