text: var draw = function(canvas, chunks, fillStyle) {
    chunks = chunks || [];
    if (!canvas.getContext) {
      console.log('use chunk bar on an canvas implementation!');
      return;
    }
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = fillStyle || "#149BDF";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var x = 0,
       width = canvas.width,
       height = canvas.height;
    chunks.forEach(function(c) {
      var dx = c.ratio * width;
      if (c.show)
        ctx.fillRect(x, 0, dx, height);
      x += dx;
    });
  };
  // put chunkbar and bitfield attributes in a canvas element
  // to use the directive, draw is optional and canvas is
  // only drawn when it is true if given
  angular
  .module('webui.directives.chunkbar', ['webui.services.utils'])
  .directive('chunkbar', ['$utils', function(utils) {
    return function(scope, elem, attrs) {
      var bitfield = "", pieces = 0, canDraw = true;
      var update = function() {
        if (canDraw)
          draw(elem[0], utils.getChunksFromHex(bitfield, pieces), attrs.fillStyle);
      };
      scope.$watch(attrs.bitfield, function(bf) {
        bitfield = bf;
        update();
      });
      scope.$watch(attrs.pieces, function(p) {
        pieces = p;
        update();
      });
  
      if (attrs.draw) {
        scope.$watch(attrs.draw, function(val) {
          canDraw = val;
        });
      }
  
      update();
    };
  }]);
  