HTML Canvas - Rotating a line from a specific point

Question

I am having trouble rotating a line at a specific point (250,250) on HTML Canvas and I was wondering how people did it. I looked at the other answers and tried them but they did not fix my problem.

var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        function circles(){

            context.beginPath();
            context.arc(250,250,6.35,0,2*Math.PI);
            context.stroke();

        }

        function lines(){
            var deg = 45;
            context.beginPath();
            context.moveTo(250,250);
            context.lineTo(250,0);
            context.stroke();

            context.save();
            context.rotate(deg * Math.PI / 180);
            context.translate(20,-25);

    // This is the line I want to rotate
            context.beginPath();
            context.moveTo(250,250);
            context.lineTo(250,0);
            context.stroke();

            //

            context.restore();

            context.beginPath();
            context.moveTo(0,250);
            context.lineTo(500,250);
            context.stroke();

        }

        circles();
        lines();

https://jsfiddle.net/athkcLyr/1/

Answer 1

You're almost there with the code that you have above. The key thing is that you need to translate the context to the point you want to rotate around, before calling rotate. You also need to translate the context back at the end.

Example with comments below:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function circles(){
    context.beginPath();
    context.arc(250,250,225.5,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,170,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,162,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,107,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,99,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,16,0,2*Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(250,250,6.35,0,2*Math.PI);
    context.stroke();
}

function lines(){
    var deg = 45;
    context.beginPath();
    context.moveTo(250,250);
    context.lineTo(250,0);
    context.stroke();

    context.save();
    // Translate the context to the point we want to rotate around
    context.translate(250, 250);
    // Perform the rotation
    context.rotate(deg * Math.PI / 180);

    // Draw the line
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(-250,0);
    context.stroke();

    // Translate the context back to it's original position
    context.translate(-250, -250);
    context.restore();

    context.beginPath();
    context.moveTo(0,250);
    context.lineTo(500,250);
    context.stroke();

}

//Reference Lines
function refLines(){
    context.beginPath();
    context.moveTo(0,250);
    context.lineTo(500,250);
    context.stroke();

    context.beginPath();
    context.moveTo(250,0);
    context.lineTo(250,500);
    context.stroke();

    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(500,500);
    context.stroke();

    context.beginPath();
    context.moveTo(0,500);
    context.lineTo(500,0);
    context.stroke();
}

circles();
lines(); 

section{
  text-align: center;
  margin: auto;
}

canvas{
  border: 1px solid black;
}

<canvas id="canvas" width="500" height="500"></canvas>