javascript - issues in Y-axis when rotating a JS object in HTML5 canvas -

I am trying to run the ball on the line while rotating with effortlessly . My problem is that the y-axis of the ball is changed while rotating the line.

Note

Maybe in my code when the line is rotated while moving the entire canvas but I do not know how to fix it.

Demo

The line is drawn here

  ctx.save (); Ctx.translate (canvas.width / 2, / 2 canvas.height); Ctx.rotate (angle * Math.PI / 180); Ctx.beginPath (); Ctx.moveTo (-lineLength / 2.0); Ctx.lineTo (lineLength / 2.0); Ctx.lineWidth = 5; Ctx.strokeStyle = 'white'; Ctx.fillStlye = "white"; Ctx.stroke (); Ctx.restore ();  
 
 Your line code is fine, the problem is how do you make the ball In the line drawing you can properly run  ctx.rotate  before  ctx.translate (canvas.windath / 2, canvas.heit / 2)  so that the line center is around The canvas of the revolutions however, if you do not do anything similar in  ball2.draw , the ball is moving around the 0,0 at the canvas, the upper left corner of the canvas. 
 
 You can fix it by doing the appropriate  ctx.translate  before rotating the canvas (1 down). But then after the rotation you have to be careful to reverse translation (2). If not, then your ball will be drawn with this.x, this is it. Relative to the center of the canvas, relative to the upper left corner of the (rotated) screen, as desired. 
 
  // Function for ball drawing on canvas: function () {ctx.save (); Ctx.beginPath (); Ctx.translate (canvas.width / 2, / 2 canvas.height); // 1 ctx.rotate (angle * Math.PI / 180); Ctx.translate (-canvas.width / 2, -canvas.height / 2); // 2 ctx.arc (this.x, this.y, this.r, 0, Math.PI * 2, False); Ctx.fillStyle = "white"; Ctx.fill (); Ctx.restore (); }