<div style="text-align: center; display: inline-block">
<canvas id="clock-1" height="240"></canvas>
<p>Modern Dark Preset</p>
</div>
<div style="text-align: center; display: inline-block">
<canvas id="clock-2" height="240"></canvas>
<p>Custom Configuration</p>
</div>
$("#clock-1").htAnalogClock(htAnalogClock.preset_modern_dark);
$("#clock-2").htAnalogClock({
hasShadow: true, // enable/disable shadow
shadowColor: "#000", // shadow color
shadowBlur: 10, // shadow blur size ( unit is pixel )
drawSecondHand: true, // draw second hand or not draw
drawMajorTicks: true, // draw major ticks or not draw
drawMinorTicks: true, // draw minor ticks or not draw
drawBorder: true, // draw border or not draw
drawFill: true, // draw fill or not draw ( transparent )
drawTexts: true, // draw hour text or not draw
drawPin: true, // draw pin or not draw
majorTicksColor: "#f88", // major ticks color
minorTicksColor: "#fa0", // minor ticks color
majorTicksLength: 10.0, // major ticks length ( percent )
minorTicksLength: 7.0, // minor ticks length ( percent )
majorTicksWidth: 0.005, // major ticks thickness ( percent )
minorTicksWidth: 0.0025, // minor ticks thickness ( percent )
fillColor: "#444", // fill color
pinColor: "#f88", // pin color
pinRadius: 5.0, // pin radius ( percent )
borderColor: "#888", // border color
borderWidth: 2.0, // border width ( percent )
secondHandColor: "#f00", // second hand color
minuteHandColor: "#fff", // minute hand color
hourHandColor: "#fff", // hour hand color
fontColor: "#fff", // font color
fontName: "Tahoma", // font name
fontSize: 10.0, // font size ( percent )
secondHandLength: 90.0, // second hand length ( percent )
minuteHandLength: 70.0, // minute hand length ( percent )
hourHandLength: 50.0, // hour hand length ( percent )
secondHandWidth: 1.0, // second hand width ( percent )
minuteHandWidth: 2.0, // minute hand width ( percent )
hourHandWidth: 3.0 // hour hand width ( percent )
});
This Pen doesn't use any external CSS resources.