Source: volume/meterCanvas.js

/**
 * Style the help steps
 * @module
 */

'use strict';

app.directive('volumeMeterCanvas', [
  function () {
    return {
      restrict: 'A',
      link: function($scope, $element) {
        var meterCanvas = $element[0];
        meterCanvas.height = 300;
        meterCanvas.width = 300;
        var meterContext = meterCanvas.getContext('2d');

        $scope.$watch('meter',function(){
          var radius = Math.floor(meterCanvas.width/2*0.8);

          meterContext.beginPath();
          meterContext.lineWidth=24;
          meterContext.arc(meterCanvas.width/2,meterCanvas.height/2,radius,0,2*Math.PI);
          meterContext.strokeStyle="#CECECE";
          meterContext.stroke();
          meterContext.closePath();

          meterContext.beginPath();
          meterContext.arc(meterCanvas.width/2,meterCanvas.height/2,radius,-Math.PI/2,2*Math.PI*$scope.meter-Math.PI/2);
          meterContext.strokeStyle="#5CAABC";
          meterContext.stroke();
          meterContext.closePath();

          meterContext.textAlign = "center";
          meterContext.textBaseline = "middle";
          meterContext.fillStyle = "#333333";
          meterContext.font = "15px Verdana";
          meterContext.fillText('Your volume is',meterCanvas.width/2, meterCanvas.height/2-30);
          meterContext.font = "36px Verdana";
          meterContext.fillText((100*$scope.meter).toFixed()+'%',meterCanvas.width/2, meterCanvas.height/2+7.5);
          meterContext.font = "18px Verdana";
          meterContext.fillText('complete',meterCanvas.width/2, meterCanvas.height/2+40);
        });
      }
    };
  }]);