SimpleClock

Analog Clock Made with Pure JavaScript using Canvas API. A simple analog clock using HTML5 canvas and javascript

Include files

In the page's footer, just before </body>, include the required JavaScript file

<script src="simpleClockOOP.min.js"></script>

Add the markup to your HTML where you want the clock to appear on your page.

<div id="myClock"></div>

Finally you can create your Clock by using the following Javascript:

var myClock = new SimpleClock('myClock');

The SimpleClock has customizable feature.

var myClock = new SimpleClock(id,
    {
        option1: value1,
        option2: value2,
    }
);

The Parameters are :

simpleClock's id, should be String.
An object to custom SimpleClock including available options which are listed below. A null object means default options.

Option	Type	Default	Description
colorHourHand	String	"black"	The color of hour hand.
colorMinuteHand	String	"black"	The color of Minute hand.
colorSecondHand	String	"red"	The color of second hand.
colorNumber	String	"black"	The color of Number.
colorNumber90Deg	String	"red"	The color of numbers drawn after every 90 degrees.
colorDash	String	"black"	The color of dash.
colorText	String	"black"	The color of text.
text	String	"Quartz"	The color of hands.
width	Number	600	The width of canvas.
height	Number	600	The height of canvas.

Resize the clock.

    myClock.setSize(width,height);

The Parameters are :