JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div class="main">
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

CSS

div.main {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: relative;
}

JavaScript

class Clock {
  constructor() {
    this.MAX_R = 200;
    this.r = this.MAX_R / 2;
    let canvas = document.getElementById("canvas");
    this.ctx = canvas.getContext('2d');
    this.ctx.strokeStyle="#FF0000";
    this.center = [this.r, this.r];
    this.second = 0;
  }
  drawLine(angle) {
    this.ctx.beginPath();
    this.ctx.moveTo(this.center[0], this.center[1]);
    let x = this.center[0] + Math.cos(angle - Math.PI / 2) * this.r;
    let y = this.center[1] + Math.sin(angle - Math.PI / 2) * this.r;
    this.ctx.lineTo(x, y);
    this.ctx.stroke();
  }
  tick() {
    setTimeout(this.tick.bind(this), 1000);
    this.ctx.clearRect(0, 0, this.MAX_R, this.MAX_R);
    this.drawLine(this.second * Math.PI / 30);
    this.second += 1;
  }
}

let clock = new Clock();
clock.tick();