JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

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

CSS

body {
  margin: 0;
  padding: 0;
}

JavaScript

/**
 * canvas Polar Clock
 */
(function() {
  //--------------------------------------------------------------------------
  //  Entry Point
  //--------------------------------------------------------------------------
  window.onload = function(e){
    var canvas = document.getElementById("canvas");
    
    var point = new Point(200, 200, 180);
    var clock = new PolarClock(canvas, point, 15, 2);
    clock.color = ["#444", "#555", "#666", "#777", "#888", "#999"];
    clock.start(25);
  };
  
  
  //--------------------------------------------------------------------------
  //  Point
  //--------------------------------------------------------------------------
  /**
   *
   * @param {Number} x canvas
   * @param {Number} y canvas
   * @param {Number} radius
   */
  var Point = function(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
  };
  
  //--------------------------------------------------------------------------
  //  Polar Clock
  //--------------------------------------------------------------------------
  /**
   *
   * @param {Object} canvas
   * @param {Point} point
   * @param {Number} line
   * @param {Number} margin
   * @param {Array.<String>} color
   */
  var PolarClock = function (canvas, point, line, margin, color) {
    this.canvas = canvas;
    this.context = canvas.getContext("2d");
    this.point = point;
    this.line = line;
    this.margin = margin;
    this.color = color || ["#333", "#555", "#777", "#999", "#BBB", "#DDD"];
  };
  
  /**
   *
   * @param {Number} interval (ms)
   */
  PolarClock.prototype.start = function(interval) {
    var self = this;
    var point = this.getPoint();
    
    setInterval(function() {
      self.step(point);
    }, interval);
  };
  
  /**
   * clear
   */
  PolarClock.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  };
  
  /**
   *
   * @return {Point}
   */
  PolarClock.prototype.getPoint = function() {
   ...