OOP Javascript Clock

Clock.js

      ////////////////////////////////////////////////////////////////////////////////
      //
      //  BUILT BY EDGAR
      //
      //  Clock.js
      //  
      //  http://builtbyedgar.com/
      //  https://twitter.com/BuiltByEdgar
      //  https://github.com/BuiltByEdgar
      //
      //  NOTICE: BBE permits you to use and modify this file.
      //  Please, I just ask you to not remove this signature, thanks!
      //
      ////////////////////////////////////////////////////////////////////////////////


      var rad = 250;
      var cv = document.getElementById("clockCanvas");
      var cx;

      if(cv.getContext('2d'))
      {
          cx = cv.getContext('2d');
      }

      cv.width = cv.height = rad;
      cx.fillStyle = "rgba(0,0,0,1)";
      cx.fillRect(0,0,rad,rad);


      function Clock( ctx, rad )
      {
            this.radius = rad / 2 - 5;
            this.center = rad / 2;
            this.canvas = ctx;

            return cx, rad;
      }

      Clock.prototype.draw = function(  )
      {
            this.canvas.clearRect( 0, 0, this.center * 2, this.center * 2 );
          
            this.canvas.lineWidth = 3;
            this.canvas.strokeStyle = "#000000";
            this.canvas.beginPath();
            this.canvas.arc( this.center, this.center, this.radius, 0, Math.PI * 2, true);
            this.canvas.closePath();
            this.canvas.stroke();
          
            this.drawDotes();
            this.drawHourDotes();
      }

      Clock.prototype.drawDotes = function(  )
      {
            var theta = 0;
            var distance = this.radius * 0.9;
          
            this.canvas.lineWidth = 1;
            this.canvas.strokeStyle = "#666666";

            for( var i = 0; i < 60; i++ )
            {
                  theta = theta + ( 6 * Math.PI / 180 );
                  
                  x = this.center + distance * Math.cos( theta );
                  y = this.center + distance * Math.sin( theta );
                  
                  this.canvas.beginPath();
                  this.canvas.arc( x, y, 1, 0, Math.PI * 2, true );
                  this.canvas.fill();
                  this.canvas.closePath();
                  this.canvas.stroke();
            }
      }

      Clock.prototype.drawHourDotes = function(  )
      {
            var theta = 0;
            var distance = this.radius * 0.9;
                
            this.canvas.lineWidth = 1;
            this.canvas.strokeStyle = "#000000";
                
            for( var i = 0; i < 12; i++ )
            {
                  theta = theta + ( 30 * Math.PI / 180 );
                  x = this.center + distance * Math.cos( theta );
                  y = this.center + distance * Math.sin( theta );
                  
                  this.canvas.beginPath();
                  this.canvas.arc( x, y, 3, 0, Math.PI * 2, true );
                  this.canvas.fill();
                  this.canvas.closePath();
                  this.canvas.stroke();
            } 
      }



      /*     SECONDS     */

      function Second( ctx, rad, sec )
      {
            this.sec = sec;
            this.canvas = ctx;
            this.center = rad / 2;
            this.size = this.center * 0.80;

            return cx, rad, 0;
      }

      Second.prototype.update = function( s )
      {
            this.sec = s;
      }

      Second.prototype.draw = function(  )
      {
            theta = ( 6 * Math.PI / 180 );
            x = this.center + this.size * Math.cos( this.sec * theta - Math.PI / 2 );
            y = this.center + this.size * Math.sin( this.sec * theta - Math.PI / 2 );

            this.canvas.lineWidth = 2;
            this.canvas.strokeStyle = '#000000';
            this.canvas.lineCap = "round";

            this.canvas.lineWidth = 2.0;
            this.canvas.strokeStyle = "#000";
            this.canvas.lineCap = "round";
          
            this.canvas.beginPath();
            this.canvas.moveTo( x, y );
            this.canvas.lineTo( this.center, this.center );
            this.canvas.closePath();
            this.canvas.stroke();
          
            this.next();
      }

      Second.prototype.next = function(  )
      {
            this.sec++;
            if( this.sec == 60 ) this.sec = 0;
      }



      /*     MINUTES     */

      function Minute( ctx, rad, min, sec )
      {
            this.sec = sec;
            this.min = min;
            this.canvas = ctx;
            this.center = rad / 2;
            this.size = this.center * 0.65;

            return cx, rad, 0, 0;
      }

      Minute.prototype.update = function( m, s )
      {
            this.sec = s;
            this.min = m;
      }

      Minute.prototype.draw = function(  )
      {
            theta = ( 6 * Math.PI / 180 );
            x = this.center + this.size * Math.cos( ( ( this.min + this.sec / 60 ) * theta ) - Math.PI / 2 );
            y = this.center + this.size * Math.sin( ( ( this.min + this.sec / 60 ) * theta ) - Math.PI / 2 );

            this.canvas.lineWidth = 3.0;
            this.canvas.strokeStyle = "#000";
            this.canvas.lineCap = "round";
          
            this.canvas.beginPath();
            this.canvas.moveTo( x, y );
            this.canvas.lineTo( this.center, this.center );
            this.canvas.closePath();
            this.canvas.stroke();
          
            this.next();
      }

      Minute.prototype.next = function(  )
      {
            this.sec ++;
            if( this.sec == 60 )
            {
                  this.min ++;
                  this.sec = 0;
                  if( this.min == 60 )
                  {
                        this.min = 0;
                  }
            }
      }


      /*     HOURS     */

      function Hour( ctx, rad, hour, min, sec )
      {
            this.sec = sec;
            this.min = min;
            this.hour = hour;
            this.canvas = ctx;
            this.center = rad / 2;
            this.size = this.center * 0.40;

            return cx, rad, 1, 0, 0;
      }

      Hour.prototype.update = function( h, m, s )
      {
            this.sec = s;
            this.min = m;
            this.hour = h;
      }

      Hour.prototype.draw = function(  )
      {
            theta = ( 30 * Math.PI / 180 );
            x = this.center + this.size * Math.cos( ( ( this.hour + this.min / 60 + this.sec / 3600 ) * theta ) - Math.PI / 2 );
            y = this.center + this.size * Math.sin( ( ( this.hour + this.min / 60 + this.sec / 3600 ) * theta ) - Math.PI / 2 );

            this.canvas.lineWidth = 5.0;
            this.canvas.strokeStyle = "#000";
            this.canvas.lineCap = "round";
          
            this.canvas.beginPath();
            this.canvas.moveTo( x, y );
            this.canvas.lineTo( this.center, this.center );
            this.canvas.closePath();

            this.canvas.stroke();
          
            this.next();
      }

      Hour.prototype.next = function(  )
      {
            this.sec ++;
            if( this.sec == 60 )
            {
                  this.sec = 0;
                  this.min ++;
                  if( this.min == 60 )
                  {
                        this.min = 0;
                        this.hour ++;
                        if( this.hour == 12 )
                        {
                              this.hour = 0;
                        }
                  }
            }
      }


      /*     DATE     */

      function DateObject()
      {
            this.dateObject = new Date();

            this.hours = this.dateObject.getHours();
            this.minutes = this.dateObject.getMinutes();
            this.seconds = this.dateObject.getSeconds();

            return;
      }

      DateObject.prototype.refresh = function(  )
      {
            this.hours = this.dateObject.getHours();
            this.minutes = this.dateObject.getMinutes();
            this.seconds = this.dateObject.getSeconds();
      }



      var init = function()
      {
            dateObj.refresh();
            sn.update( dateObj.seconds );
            mn.update( dateObj.minutes, dateObj.seconds );
            hn.update( dateObj.hours, dateObj.minutes, dateObj.seconds );
      }

      var clock = function()
      {
            cf.draw();
            sn.draw();
            mn.draw();
            hn.draw();

            setTimeout( clock, 1000 / 1 );
      }

      var cf = new Clock( cx, rad );
      var sn = new Second( cx, rad, 0 );
      var mn = new Minute( cx, rad, 0, 0 );
      var hn = new Hour( cx, rad, 1, 0, 0 );
      var dateObj = new DateObject(  );

      init(); 
      clock();
      
      
      /////////////////////////////////////////////////////////
      //
      // IMPLEMENT
      // <canvas id="clockCanvas" width="300" height="300">
      // <script type="text/javascript" src="Clock.js"></script>
      //
      /////////////////////////////////////////////////////////