dist/knob.js
function draw() {
    // draw background
    this.ctx.fillStyle = this.container.background;
    this.ctx.strokeStyle = this.stroke;
    this.ctx.lineWidth = this.lineWidth;

    this.ctx.fillRect(0, 0, this.rect.width, this.rect.height);

    var x = 0,
        y = 0,
        width = this.rect.width,
        height = this.rect.height,
        radius = width / 2;

    this.ctx.fillRect(x, y, width, height);
    //this.ctx.strokeStyle = this.stroke

    this.ctx.fillStyle = this.background; // draw background of widget first

    var angle0 = Math.PI * .6,
        angle1 = Math.PI * .4;

    this.ctx.beginPath();
    this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle0, angle1, false);
    this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle1, angle0, true);
    this.ctx.closePath();

    this.ctx.fill();

    var angle2 = void 0;
    if (!this.isInverted) {
      angle2 = Math.PI * .6 + this.__value * 1.8 * Math.PI;
      if (angle2 > 2 * Math.PI) angle2 -= 2 * Math.PI;
    } else {
      angle2 = Math.PI * (0.4 - 1.8 * this.__value);
    }

    this.ctx.beginPath();

    if (!this.isInverted) {
      this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle0, angle2, false);
      this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle2, angle0, true);
    } else {
      this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle1, angle2, true);
      this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle2, angle1, false);
    }

    this.ctx.closePath();

    this.ctx.fillStyle = this.fill;
    this.ctx.fill();
  }
function draw() {
    // draw background
    this.ctx.fillStyle = this.container.background;
    this.ctx.strokeStyle = this.stroke;
    this.ctx.lineWidth = this.lineWidth;

    this.ctx.fillRect(0, 0, this.rect.width, this.rect.height);

    var x = 0,
        y = 0,
        width = this.rect.width,
        height = this.rect.height,
        radius = width / 2;

    this.ctx.fillRect(x, y, width, height);
    //this.ctx.strokeStyle = this.stroke

    this.ctx.fillStyle = this.background; // draw background of widget first

    var angle0 = Math.PI * .6,
        angle1 = Math.PI * .4;

    this.ctx.beginPath();
    this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle0, angle1, false);
    this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle1, angle0, true);
    this.ctx.closePath();

    this.ctx.fill();

    var angle2 = void 0;
    if (!this.isInverted) {
      angle2 = Math.PI * .6 + this.__value * 1.8 * Math.PI;
      if (angle2 > 2 * Math.PI) angle2 -= 2 * Math.PI;
    } else {
      angle2 = Math.PI * (0.4 - 1.8 * this.__value);
    }

    this.ctx.beginPath();

    if (!this.isInverted) {
      this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle0, angle2, false);
      this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle2, angle0, true);
    } else {
      this.ctx.arc(x + radius, y + radius, radius - this.knobBuffer, angle1, angle2, true);
      this.ctx.arc(x + radius, y + radius, (radius - this.knobBuffer) * .5, angle2, angle1, false);
    }

    this.ctx.closePath();

    this.ctx.fillStyle = this.fill;
    this.ctx.fill();
  }
function draw ( ) { // draw background this . ctx . fillStyle = this . container . background ; this . ctx . strokeStyle = this . stroke ; this . ctx . lineWidth = this . lineWidth ; this . ctx . fillRect ( 0 , 0 , this . rect . width , this . rect . height ) ; var x = 0 , y = 0 , width = this . rect . width , height = this . rect . height , radius = width / 2 ; this . ctx . fillRect ( x , y , width , height ) ; //this.ctx.strokeStyle = this.stroke this . ctx . fillStyle = this . background ; // draw background of widget first var angle0 = Math . PI * .6 , angle1 = Math . PI * .4 ; this . ctx . beginPath ( ) ; this . ctx . arc ( x + radius , y + radius , radius - this . knobBuffer , angle0 , angle1 , false ) ; this . ctx . arc ( x + radius , y + radius , ( radius - this . knobBuffer ) * .5 , angle1 , angle0 , true ) ; this . ctx . closePath ( ) ; this . ctx . fill ( ) ; var angle2 = void 0 ; if ( ! this . isInverted ) { angle2 = Math . PI * .6 + this . __value * 1.8 * Math . PI ; if ( angle2 > 2 * Math . PI ) angle2 -= 2 * Math . PI ; } else { angle2 = Math . PI * ( 0.4 - 1.8 * this . __value ) ; } this . ctx . beginPath ( ) ; if ( ! this . isInverted ) { this . ctx . arc ( x + radius , y + radius , radius - this . knobBuffer , angle0 , angle2 , false ) ; this . ctx . arc ( x + radius , y + radius , ( radius - this . knobBuffer ) * .5 , angle2 , angle0 , true ) ; } else { this . ctx . arc ( x + radius , y + radius , radius - this . knobBuffer , angle1 , angle2 , true ) ; this . ctx . arc ( x + radius , y + radius , ( radius - this . knobBuffer ) * .5 , angle2 , angle1 , false ) ; } this . ctx . closePath ( ) ; this . ctx . fillStyle = this . fill ; this . ctx . fill ( ) ; }
Draw the Knob onto its canvas context using the current .__value property.
@memberof Knob
@instance
Draw the Knob onto its canvas context using the current . __value property .