JSFiddle - React, Tailwind, and code Playground

by Sandy Ganz

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jsAnalogClock</title>
	  <script type='text/javascript' src='analogclock.js'></script>

</head>

<!-- Working on fixing up the commonly found HTML5 clock -->
<!-- Making it soft first, then create a clock object and related part -->
<!-- (C) Sandy Ganz 2014-2015 [email protected] -->

<body onLoad="runOnLoad();">
	<h1>Javascript Analog Clock Hack by Sandy Ganz</h1>
    <canvas id="analog-clock"></canvas>
    <canvas id="analog-clock1"></canvas>
	<p>
    <a href="http://www.wtfpl.net/"><img
           src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-4.png"
           width="80" height="15" alt="WTFPL" /></a>
    <p>We Proudly Support WTFPL for licensing</p>       
	<h2>Here is the link to the project so you can mess with the code</h2>
	<a href="http://jsfiddle.net/sganz/t20qv4rt/">jsFiddle Link</a><br />
	<a href="https://github.com/sganz/analogclock.git">GitHub Javascript Repo (More Current then jsFiddle)</a>
	</p>
    <script type="text/javascript">
        function runOnLoad()
        {
            var a1 = myclock1('analog-clock');
            var a2 = myclock2('analog-clock1',
                [{start:"08:00",end:"09:00",subject:"test1"},
                 {start:"10:00",end:"12:30",subject:"test2"},
                 {start:"14:00",end:"16:30",subject:"test3"}],{});
        }
    </script>
</body>

</html>

JavaScript

/*
 * Begat : Original code by many, generic HTML5/Canvas clock example.
 * Date  : 12/30/2014
 * Who   : Sandy Ganz
 *
 * Revisions -
 *
 * 0.0  - 12/30/2014 sjg - Begat
 * 0.6  - 01/01/2015 sjg - Added face background inset to make more 3d like
 * 0.7  - 01/02/2015 sjg - Changed hoursOffset to work agaist date() so calendar updates OK,
 *                         added more comment, removed wastefull variable checks in drawPathFast().
 *                         Beginning of multiple clocks on page
 * 0.8  - 01/04/2015 sjg - Totally broke code in initial attempt to objectify it.
 * 0.9  - 02/23/2015 sjg - Fixed up timer with some hack code. Added static background draw, fixed
 *                         up hand angles and a few other bits. Still Hack, but at least working again.
 * 0.91 - 08/28/2015 sjg - Added wtfpl LICENSE AGREEMENT
 *                         
 *
 * Notes -
 *
 * This was a hack project that I was messing with. The original had poor optimization
 * and was drawing a lot more then needed. Worst was the vector drawing that used
 * a string with the coordinates. These were also changed to regular array for
 * performance. Exposed most setting via options. The default settings for options
 * are very noisy to show functionality, turn stuff off to clean up look!
 *
 * Todo -
 *
 * General code clean and comment. Some possible structural changes to have a 'class'
 * like structure called Clock that keeps things out of the global name space.
 * Rename some of the option variables to be more consistent or shorter (I haven't
 * decided yet).
 *
 * The big ones are make the functions that are specific generic, for example
 * annular ticks, bezels, etc. Right now they are hard coded with positions,
 * sizes, and so on. Oh yeah learn Javascript...
 *
 * Figure out how to create a snap shot of the canvas with all the shading and drawing
 * done once then animate the image back before drawing hands. I think this would
 * be faster at some point, but not sure....