I am new to Canvas and I need to do some things I cannot find answer on google ...
Suppose I have a line w/ starting & ending points. I need to rotate this line around the starting point.
Here is the jsfiddle : http://jsfiddle.net/0cc6h833/1/
var cd;
var ctx2;
var startPoint;
var endPoint;
function init(){
cd= document.getElementById("canvas2");
cd.width=500;
cd.height=500;
ctx2=cd.getContext("2d");
}
function draw(){
startPoint={ x:200, y:200};
endPoint={ x:startPoint.x+100, y:startPoint.y+100};
ctx2.beginPath();
ctx2.setLineDash([1,2]);
ctx2.moveTo(startPoint.x,startPoint.y);
ctx2.lineTo(endPoint.x,endPoint.y);
ctx2.stroke();
ctx2.closePath();
}
init();
draw();
Also I am open to use any of Canvas Library. I know that will be simpler but I don't know which one to choose
You can use transformations to rotate a line or any shape drawn to canvas. To rotate:
In your case, if we say rotate around the middle of the line:
That being said, if you need to interact with the line then transformation can appear confusing because mouse positions do not inverse the transformation and will end up a different place than what you expect them.
For this reason you could use manual transformation so you know the exact location of the line ends after being transformed (with the built-in transformation you operate on the original position).
For this, please see this answer for an approach on that part.