cicle watch

by Luis Martin

HTML

<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
<body>

  <div id="h">


    <h1 id="steps">
   Steps
</h1>
    <h1 id="floors">
   floors
</h1>
    <h1 id="calories">
   calories
</h1>
    <h1 id="kms">
   kms
</h1>

  </div>

  <canvas id="myCanvas" width="360" height="360">
    Your browser does not support the HTML5 canvas tag.</canvas>


</body>

CSS

h1#steps {

  top: 0px;
}

h1#floors {

  top: 10px;
}
div#h{
    position: absolute;
  left: 180px;
  top: 0px;
  
}

canvas {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px
}

JavaScript

$(document).ready(function() {

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");



  ctx.beginPath();
  $('#steps').circleType({
    radius: 180
  });
  ctx.arc(180, 180, 180, 0, 2 * Math.PI);
  ctx.stroke();

  ctx.beginPath();
  $('#floors').circleType({
    radius: 150
  });
  ctx.arc(180, 180, 150, 0, 2 * Math.PI);
  ctx.stroke();

  ctx.beginPath();
  $('#calories').circleType({
    radius: 120
  });
  ctx.arc(180, 180, 120, 0, 2 * Math.PI);
  ctx.stroke();

  ctx.beginPath();
  $('#kms').circleType({
    radius: 90
  });
  ctx.arc(180, 180, 90, 0, 2 * Math.PI - 30);
  ctx.stroke();



});










/*
 * CircleType 0.36
 * Peter Hrynkow
 * Copyright 2014, Licensed GPL & MI
 * Modified by http://stackoverflow.com/users/1913729/blex
 */

$.fn.circleType = function(options) {

  var self = this,
    settings = {
      dir: 1,
      position: 'relative',
    };
  if (typeof($.fn.lettering) !== 'function') {
    console.log('Lettering.js is required');
    return;
  }
  return this.each(function() {

    if (options) {
      $.extend(settings, options);
    }
    var elem = this,
      delta = (180 / Math.PI),
      fs = parseInt($(elem).css('font-size'), 10),
      ch = parseInt($(elem).css('line-height'), 10) || fs,
      letters,
      center;

    // trim spaces at the beginning and at the end
    elem.innerHTML = elem.innerHTML.replace(/^\s+|\s+$/g, '');

    // grab the HTML string
    var temp = elem.innerHTML;

    // replace any space that is not part of a tag with a non-breakable space (&nbsp;)
    elem.innerHTML = elem.innerHTML.replace(/<[^<>]+>|\s/g, function(s) {
      return s[0] == '<' ? s : '&nbsp;';
    })

    // wrap each character in a span
    $(elem).lettering();


    var inTag = false, // are we between tags? (<i>here</i>)
      isTag = false, // are we inside a tag? (<here></here>)
      tagNum = -1, // how many opening tags have we met so far?
      pos = 0, // character position (excluding tags)
     ...