Rotate a line in 3rd dimension on HTML5 canvas

Question

I can easily draw/rotate a line of given length around z-axis, y-axis or x-axis.

const ctx = document.getElementById("drawing").getContext("2d");
ctx.scale(1, -1); ctx.translate(0, -ctx.canvas.height); // flip canvas

const length = 50;
let t = 0;

//x = r sin(q) cos(f)
//y = r sin(q) sin(f)
//z = r cos(q)

function rotate_around_zaxis() {
  const x1=50; const y1=50;
  const line_angle = 20 * Math.PI/180;
  const angle = 0;

  ctx.beginPath(); 
  ctx.moveTo(x1, y1); 
  ctx.lineTo(x1 + length * Math.sin(line_angle) * Math.cos(angle + t), 
             y1 + length * Math.sin(line_angle) * Math.sin(angle + t)); 
  ctx.stroke();
}

function rotate_around_yaxis() {
  const x1=150; const y1=50;
  const line_angle = 20 * Math.PI/180;
  const angle = 0;

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x1 + length * Math.sin(line_angle) * Math.cos(angle + t), 
             y1 + length /*Math.sin(angle + t)*/ * Math.cos(line_angle) ); 
  ctx.stroke();
}

function rotate_around_xaxis() {
  const x1=250; const y1=50;
  const line_angle = 20 * Math.PI/180;
  const angle = 0;

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x1 + length /**Math.sin(angle + t)*/ * Math.cos(line_angle), 
             y1 + length * Math.sin(line_angle) * Math.sin(angle + t)); 
  ctx.stroke();
}

function line(x1, y1, x2, y2) {
  ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
}

function animate() {
  ctx.clearRect(0,0,300,100);
  line(0, 50, 100, 50);line(50, 0, 50, 100);rotate_around_zaxis();
  line(105, 50, 200, 50);line(150, 0, 150, 100);rotate_around_yaxis();
  line(205, 50, 300, 50);line(250, 0, 250, 100);rotate_around_xaxis();
  t+=Math.PI/180;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

<canvas id="drawing" width=300 height=100></canvas>

However I can only do this around straight up/down y-axis degree or straight x-axis. I can not figure out rotation around an arbitrary line in space. In other words I don't know how to move it to any point in 3d space between x,y and z/.

I couldn't grasp rotation matrices. Rotation calculation on many places is given like this.

x' = x * cos(angle) - y * sin(angle); 
y' = x * sin(angle) + y * cos(angle);

I don't understand where this equation fits in what I am trying to do.

I want to be able to rotate the line in cone like shape around any axis. How do I achieve this?

Answer 1

Well, theoretically, if the first example works, then to get the second one, you can apply the first one, and then just translate everything -60°

let newX2 = Math.cos(-60 / Math.PI/180) * x2
let newY2 = Math.sin(-60 / Math.PI/180) * y2

same for x1 and y1