Canvas Stopwatch

by vaibhav saxena

HTML

<script src="https://gist.github.com/paulirish/1579671/raw/7f515ade253afbc860dac1f84e21998d54359d79/rAF.js"></script>
<h1>For ZEFR Test</h1>
    
<div id="time">3600</div>

<canvas id="stopwatch" width="550" height="550">Canvas not supported</canvas>

<div id="controls">
    Seconds: <input id="seconds" type="text" value="3600" size="4"/>
    <input id="startStopButton" type="button" value="Start"/>
</div>

CSS

h1 {
    position: relative;
    top: 35px;
    left: 10px;
    display: inline-block;
}
#time {
    display: none;
    text-align: center;
    font: bold 28px arial;
    color: #cc0000; 
    text-shadow: 2px 2px 3px #ccc;
}
#controls {
    position: absolute;
    top: 170px;
    left: 280px;
    padding: 10px;
    background: rgba(44, 164, 202, 0.3);
    border: 1px solid rgba(0, 92, 255, 0.8);
    -webkit-border-radius: 4px;
            border-radius: 4px;
}
input {
    font-weight: bold;
    padding: 3px 3px 0;
}
#stopwatch {
    background: #f7f7f7;
}
body { font-family: arial; }

JavaScript

/**
 * Stopwatch Constructor
 */

Stopwatch = function() { };

Stopwatch.prototype = {
   startTime: 0,
   running: false,
   elapsed: undefined,

   start: function() {
      this.startTime = +new Date();
      this.elapsedTime = undefined;
      this.running = true;
   },
   stop: function() {
      this.elapsed = (+new Date()) - this.startTime;
      this.running = false;
   },
   getElapsedTime: function() {
      if (this.running) {
         return (+new Date()) - this.startTime;
      }
      else {
        return this.elapsed;
      }
   },
   isRunning: function() {
      return this.running;
   },
   reset: function() {
     this.elapsed = 0;
   }
};


/****************************************************/
/****** Using the Stopwatch for good stuff **********/

var canvas = document.getElementById('stopwatch'),
    ctx = canvas.getContext('2d'),
    startStopButton = document.getElementById('startStopButton'),
    secondsInput = document.getElementById('seconds'),

    TICK_WIDTH = 15,
    TEXT_MARGIN = 135,
    CENTROID_RADIUS = 10,
    DEGREE_DIAL_MARGIN = 55,
    TRACKING_DIAL_MARGIN = 80,
    DEGREE_ANNOTATIONS_TEXT_SIZE = 18,
    DEGREE_OUTER_DIAL_MARGIN = DEGREE_DIAL_MARGIN,

    CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)',
    CENTROID_FILL_STYLE ='rgba(80, 190, 240, 0.6)',
    GUIDEWIRE_FILL_STYLE = 'rgba(85, 190, 240, 0.8)',
    TICK_LONG_STROKE_STYLE = 'rgba(100, 140, 230, 0.9)',
    TICK_SHORT_STROKE_STYLE = 'rgba(100, 140, 230, 0.7)',   
    DEGREE_ANNOTATIONS_FILL_STYLE = 'rgba(0, 0, 230, 0.9)',
    TRACKING_DIAL_STROKING_STYLE = 'rgba(100, 140, 230, 0.5)',

    GUIDEWIRE_STROKE_STYLE = '#8ada55',
    GUIDEWIRE_FILL_STYLE = 'rgba(0, 0, 230, 0.9)';

    var circle = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 150
    },

    timerSetting = 0,
    stopwatch = new Stopwatch();

function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();
   return {
	x: x - bbox.left * (canvas.width  /...