Question

I’m drawing some shapes on canvas, but rotation freaks me up. From tutorials I found cannot find solution because of my stupid head or they are not showing interactive transformation, or both.

I made the code that draws some shapes with mousedown–mousemove–mouseup events, but I want to rotating while mousemove point is on… (x1, y1) – starting point and (x2, y2) ending point. Please be free to upgrade the code below:

context.strokeRect(x1, y1, x2-x1, y2-y1);

So what exactly could I write for those rectangles to follow point (x2, y2) while holding the button?

Answer 1

I found solution, follow the code:

var xd = x2-x1,
yd = y2-y1;
var theta = Math.atan2(yd, xd); 
var deg = theta*180/Math.PI;
var xyd = Math.sqrt((xd*xd)+(yd*yd));


context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#856020";
context.save();
context.translate(x1,y1);
context.rotate(theta);
context.strokeRect(0,0,xyd,yd);
context.restore();