JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="c" width="150" height="150"></canvas>
<button onclick="draw()">
asd
</button>
  </body>
</html>

JavaScript

function degrees_to_radians(degrees) {
  var pi = Math.PI;
  return degrees * (pi / 180);
}

p1x = 75;
p1y = 25;
p2x = 75;
p2y = 125;
deg = 0

function draw() {
  var canvas = document.getElementById('c');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    deg += 1;
    console.log(deg);
    rad = degrees_to_radians(deg);
    console.log(rad);
    cx = 75; //punkt wokol ktorego nastepuje rotacja
    cy = 75; //punkt wokol ktorego nastepuje rotacja
    p1xn = ((p1x - cx) * Math.cos(rad) + (p1y - cy) * Math.sin(rad)) + cx
    p1yn = (-(p1x - cx) * Math.sin(rad) + (p1y - cy) * Math.cos(rad)) + cy

    p2xn = ((p2x - cx) * Math.cos(rad) + (p2y - cy) * Math.sin(rad)) + cx
    p2yn = (-(p2x - cx) * Math.sin(rad) + (p2y - cy) * Math.cos(rad)) + cy
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(p1xn, p1yn);
    ctx.lineTo(p2xn, p2yn);
    ctx.stroke();

  }
}