justinhough/canvas_percentage_POC.html

## canvas_percentage_POC.html
<html>
<head>

<style>
  .stats {
    float: left;
    margin-right: 20px;
    position: relative;
    /*height: 250px;
    width: 250px;*/
  }
  .stats h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    top: 35%;
    left: 25%;
  }
</style>

<script>
function _drawCircle(ctx) {
  // requestAnimationFrame Shim
  (function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
  })();

  var canvas = document.getElementById(ctx.canvasId);

  var W = ctx.width;
  var H = ctx.height;

  var x = ctx.width / 2;
  var y = ctx.height / 2;

  canvas.height = ctx.height;
  canvas.width = ctx.width;

  var radius = ctx.radius;
  var endPercent = ctx.degrees;
  var curPerc = 0;
  var counterClockwise = false;
  var circ = Math.PI * 2;
  var quart = Math.PI / 2;
  var text = ctx.text;
  var color = ctx.borderColor;
  var shadowColor = ctx.shadowColor;
  var start_degree = 0;

  function _init(current) {
    var ctx = canvas.getContext('2d');
    // clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // set border size, path and color
    ctx.lineWidth = 5;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 10;
    ctx.shadowColor = shadowColor;
    ctx.strokeStyle = color;

    ctx.beginPath();
    ctx.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
    curPerc++;
    if (curPerc < endPercent) {
      requestAnimationFrame(function () {
        _init(curPerc / 100);
        _text(ctx);
      });
    }
  }

  // Generates animated percentage count
  function _text(ctx) {
    // Set font size and font-family
    ctx.font = Math.round(radius / 4) + "px Avenir";
    // @FIXME: had to offset degrees by three percent.
    text = start_degree + 3 + "%";
    // center text in canvas
    text_width = ctx.measureText(text).width;
    ctx.fillText(text, W / 2 - text_width / 2, H / 2 + (Math.round(radius / 5) / 2) );

    if (curPerc < endPercent) {
      requestAnimationFrame(function () {
        if (start_degree < endPercent) { start_degree++; }
      });
    }
  }

  // Run it
  _init();
}
</script>


</head>
<body>

  <canvas id="amazing" class="stats"></canvas>
  <canvas id="tea" class="stats"></canvas>
  <canvas id="coffee" class="stats"></canvas>

  <script>
    var circle1 = {
        "canvasId": "amazing",
        "text": "The Sauce",
        "degrees": "75",
        "radius": "175",
        "width": "400",
        "height": "400",
        "borderColor": "#00ff00",
        "shadowColor": "#FFF"
    }
    var circle2 = {
        "canvasId": "tea",
        "text": "Some Tea?",
        "degrees": "85",
        "radius": "100",
        "width": "300",
        "height": "300",
        "borderColor": "#0000ff",
        "shadowColor": "#FFF"
    }
    var circle3 = {
        "canvasId": "coffee",
        "text": "Le Beans",
        "degrees": "95",
        "radius": "75",
        "width": "200",
        "height": "200",
        "borderColor": "#ff0000",
        "shadowColor": "#FFF"
    }

    new _drawCircle(circle1);
    new _drawCircle(circle2);
    new _drawCircle(circle3);

  </script>

</body>
</html>
	<html>
	<head>

	<style>
	.stats {
	float: left;
	margin-right: 20px;
	position: relative;
	/*height: 250px;
	width: 250px;*/
	}
	.stats h2 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;

	position: absolute;
	top: 35%;
	left: 25%;
	}
	</style>

	<script>
	function _drawCircle(ctx) {
	// requestAnimationFrame Shim
	(function() {
	var requestAnimationFrame = window.requestAnimationFrame \|\| window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\| window.msRequestAnimationFrame;
	window.requestAnimationFrame = requestAnimationFrame;
	})();

	var canvas = document.getElementById(ctx.canvasId);

	var W = ctx.width;
	var H = ctx.height;

	var x = ctx.width / 2;
	var y = ctx.height / 2;

	canvas.height = ctx.height;
	canvas.width = ctx.width;

	var radius = ctx.radius;
	var endPercent = ctx.degrees;
	var curPerc = 0;
	var counterClockwise = false;
	var circ = Math.PI * 2;
	var quart = Math.PI / 2;
	var text = ctx.text;
	var color = ctx.borderColor;
	var shadowColor = ctx.shadowColor;
	var start_degree = 0;

	function _init(current) {
	var ctx = canvas.getContext('2d');
	// clear canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// set border size, path and color
	ctx.lineWidth = 5;
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = 10;
	ctx.shadowColor = shadowColor;
	ctx.strokeStyle = color;

	ctx.beginPath();
	ctx.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
	ctx.stroke();
	curPerc++;
	if (curPerc < endPercent) {
	requestAnimationFrame(function () {
	_init(curPerc / 100);
	_text(ctx);
	});
	}
	}

	// Generates animated percentage count
	function _text(ctx) {
	// Set font size and font-family
	ctx.font = Math.round(radius / 4) + "px Avenir";
	// @FIXME: had to offset degrees by three percent.
	text = start_degree + 3 + "%";
	// center text in canvas
	text_width = ctx.measureText(text).width;
	ctx.fillText(text, W / 2 - text_width / 2, H / 2 + (Math.round(radius / 5) / 2) );

	if (curPerc < endPercent) {
	requestAnimationFrame(function () {
	if (start_degree < endPercent) { start_degree++; }
	});
	}
	}

	// Run it
	_init();
	}
	</script>


	</head>
	<body>

	<canvas id="amazing" class="stats"></canvas>
	<canvas id="tea" class="stats"></canvas>
	<canvas id="coffee" class="stats"></canvas>

	<script>
	var circle1 = {
	"canvasId": "amazing",
	"text": "The Sauce",
	"degrees": "75",
	"radius": "175",
	"width": "400",
	"height": "400",
	"borderColor": "#00ff00",
	"shadowColor": "#FFF"
	}
	var circle2 = {
	"canvasId": "tea",
	"text": "Some Tea?",
	"degrees": "85",
	"radius": "100",
	"width": "300",
	"height": "300",
	"borderColor": "#0000ff",
	"shadowColor": "#FFF"
	}
	var circle3 = {
	"canvasId": "coffee",
	"text": "Le Beans",
	"degrees": "95",
	"radius": "75",
	"width": "200",
	"height": "200",
	"borderColor": "#ff0000",
	"shadowColor": "#FFF"
	}

	new _drawCircle(circle1);
	new _drawCircle(circle2);
	new _drawCircle(circle3);

	</script>

	</body>
	</html>