nl_tokens: Draw the Knob onto its canvas context using the current . __value property .
pl_tokens: 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 , <mask> ) ; 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 ( ) ; }