function draw() {
    // draw background
    this.ctx.fillStyle = this.background;
    this.ctx.strokeStyle = this.stroke;
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.fillRect(0, 0, this.rect.width, this.rect.height);

    // draw fill (multiSlider value representation)
    this.ctx.fillStyle = this.fill;

    var sliderWidth = this.style === 'vertical' ? this.rect.width / this.count : this.rect.height / this.count;

    for (var i = 0; i < this.count; i++) {

      if (this.style === 'horizontal') {
        var ypos = Math.floor(i * sliderWidth);
        this.ctx.fillRect(0, ypos, this.rect.width * this.__value[i], Math.ceil(sliderWidth));
        this.ctx.strokeRect(0, ypos, this.rect.width, sliderWidth);
      } else {
        var xpos = Math.floor(i * sliderWidth);
        this.ctx.fillRect(xpos, this.rect.height - this.__value[i] * this.rect.height, Math.ceil(sliderWidth), this.rect.height * this.__value[i]);
        this.ctx.strokeRect(xpos, 0, sliderWidth, this.rect.height);
      }
    }
  }
function draw() {
    
    this.ctx.fillStyle = this.background;
    this.ctx.strokeStyle = this.stroke;
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.fillRect(0, 0, this.rect.width, this.rect.height);

    
    this.ctx.fillStyle = this.fill;

    var sliderWidth = this.style === 'vertical' ? this.rect.width / this.count : this.rect.height / this.count;

    for (var i = 0; i < this.count; i++) {

      if (this.style === 'horizontal') {
        var ypos = Math.floor(i * sliderWidth);
        this.ctx.fillRect(0, ypos, this.rect.width * this.__value[i], Math.ceil(sliderWidth));
        this.ctx.strokeRect(0, ypos, this.rect.width, sliderWidth);
      } else {
        var xpos = Math.floor(i * sliderWidth);
        this.ctx.fillRect(xpos, this.rect.height - this.__value[i] * this.rect.height, Math.ceil(sliderWidth), this.rect.height * this.__value[i]);
        this.ctx.strokeRect(xpos, 0, sliderWidth, this.rect.height);
      }
    }
  }
function draw ( ) { // draw background this . ctx . fillStyle = this . background ; this . ctx . strokeStyle = this . stroke ; this . ctx . lineWidth = this . lineWidth ; this . ctx . fillRect ( 0 , 0 , this . rect . width , this . rect . height ) ; // draw fill (multiSlider value representation) this . ctx . fillStyle = this . fill ; var sliderWidth = this . style === 'vertical' ? this . rect . width / this . count : this . rect . height / this . count ; for ( var i = 0 ; i < this . count ; i ++ ) { if ( this . style === 'horizontal' ) { var ypos = Math . floor ( i * sliderWidth ) ; this . ctx . fillRect ( 0 , ypos , this . rect . width * this . __value [ i ] , Math . ceil ( sliderWidth ) ) ; this . ctx . strokeRect ( 0 , ypos , this . rect . width , sliderWidth ) ; } else { var xpos = Math . floor ( i * sliderWidth ) ; this . ctx . fillRect ( xpos , this . rect . height - this . __value [ i ] * this . rect . height , Math . ceil ( sliderWidth ) , this . rect . height * this . __value [ i ] ) ; this . ctx . strokeRect ( xpos , 0 , sliderWidth , this . rect . height ) ; } } }
Draw the MultiSlider onto its canvas context using the current .__value property.
@memberof MultiSlider
@instance
Draw the MultiSlider onto its canvas context using the current . __value property .