Canvas Based Clock JavaScript Library – CanvasClock

Category: Date & Time , Javascript | October 20, 2016
Views Total:2,797 views
Official Page:Go to website
Last Update:October 20, 2016


Canvas Based Clock JavaScript Library – CanvasClock


This is a canvas based JavaScript library with 15 different clocks that can be embedded in webpages. Without any CSS and 3rd JavaScript libraries.

How to use it:

Just place the canvas_clock.js library into the webpage and we’re ready to go.

<script src="canvas_clock.js"></script>

Create an HTML5 canvas element to place the clock.

<canvas id="demo" width="200px" height="200px"></canvas>

Create a default clock.

  // options here

Config the clock with the following options.

  // shows indicators
  "indicate": true/false,
  // color of the indicaters
  "indicate_color": "#aabbcc",
  // color of the seconds dial
  "dial1_color": "#aabbcc",
  // color of the minutes dial
  "dial2_color": "#aabbcc",
  // color of the hour dial
  "dial3_color": "#aabbcc",
  // shows the time as well using text
  "time_add": 1/2/3/4,
  // the color of the text time
  "time_add_color": "#aabbcc",
  // use 24 hour notation
  "time_24h": true/false,
  // modify the time by adding or subtracting seconds to the time
  // show the date as well using text
  "date_add": 1/2/3/4/5,
  // the color of the date text
  "date_add_color": "#aabbcc",
  // the background color
  // the opacity of the background image if shown
  "bg_opacity": 0.0-1.0,

Render the clock on the canvas element you just created.

context = document.getElementById('demo').getContext('2d')
clock_conti(context, 200, object);

You Might Be Interested In:

One thought on “Canvas Based Clock JavaScript Library – CanvasClock

Leave a Reply