function (settings) {
            var setting, i, j, last, interval,
                sp = this.stepParams,
                isStart = (sp.timing === "start"),
                p = [];

            var defaultSettings = {
                bgColor:        "transparent",
                borderColor:    "#bbb",
                stepColor:      "#2893ef",
                dashColor:      "#b8b8b8",
                borderWidth:    0.00667,
                stepLineWidth:  0.02,
                dashLineWidth:  0.008,
                pointLineWidth: 0.008,
                pointRadius:    0.015
            };

            this.settings = settings || {};

            for (setting in defaultSettings) {
                if (defaultSettings.hasOwnProperty(setting)) {
                    if (!this.settings.hasOwnProperty(setting)) {
                        this.settings[setting] = defaultSettings[setting];
                    }
                }
            }

            this.ctx = this.canvas.getContext("2d");

            // Build points array. There's a starting point at 0,0
            // plus a point for each step
            p[0] = { x: 0, y: 0 };
            for (i = 1; i <= sp.count; i++) {
                interval = i / sp.count;
                p[i] = { x: interval, y: interval };
            }

            // Start with a clean slate
            this.ctx.clearRect(-0.5, -0.5, 2, 2);
            this.drawBackground();

            // Draw each interval
            last = p.length - 1;
            for (i = 0, j = 1; i < last; i++, j++) {
                if (isStart) {
                    this.drawStartInterval(p[i].x, p[i].y, p[j].x, p[j].y);
                } else {
                    this.drawEndInterval(p[i].x, p[i].y, p[j].x, p[j].y);
                }
            }

            // Each interval draws start and mid point for that interval,
            // so we need to draw last point. It's always filled.
            this.drawPoint(p[last].x, p[last].y, true);
        }
function (settings) {
            var setting, i, j, last, interval,
                sp = this.stepParams,
                isStart = (sp.timing === "start"),
                p = [];

            var defaultSettings = {
                bgColor:        "transparent",
                borderColor:    "#bbb",
                stepColor:      "#2893ef",
                dashColor:      "#b8b8b8",
                borderWidth:    0.00667,
                stepLineWidth:  0.02,
                dashLineWidth:  0.008,
                pointLineWidth: 0.008,
                pointRadius:    0.015
            };

            this.settings = settings || {};

            for (setting in defaultSettings) {
                if (defaultSettings.hasOwnProperty(setting)) {
                    if (!this.settings.hasOwnProperty(setting)) {
                        this.settings[setting] = defaultSettings[setting];
                    }
                }
            }

            this.ctx = this.canvas.getContext("2d");

            // Build points array. There's a starting point at 0,0
            // plus a point for each step
            p[0] = { x: 0, y: 0 };
            for (i = 1; i <= sp.count; i++) {
                interval = i / sp.count;
                p[i] = { x: interval, y: interval };
            }

            // Start with a clean slate
            this.ctx.clearRect(-0.5, -0.5, 2, 2);
            this.drawBackground();

            // Draw each interval
            last = p.length - 1;
            for (i = 0, j = 1; i < last; i++, j++) {
                if (isStart) {
                    this.drawStartInterval(p[i].x, p[i].y, p[j].x, p[j].y);
                } else {
                    this.drawEndInterval(p[i].x, p[i].y, p[j].x, p[j].y);
                }
            }

            // Each interval draws start and mid point for that interval,
            // so we need to draw last point. It's always filled.
            this.drawPoint(p[last].x, p[last].y, true);
        }
function ( settings ) { var setting , i , j , last , interval , sp = this . stepParams , isStart = ( sp . timing === "start" ) , p = [ ] ; var defaultSettings = { bgColor : "transparent" , borderColor : "#bbb" , stepColor : "#2893ef" , dashColor : "#b8b8b8" , borderWidth : 0.00667 , stepLineWidth : 0.02 , dashLineWidth : 0.008 , pointLineWidth : 0.008 , pointRadius : 0.015 } ; this . settings = settings || { } ; for ( setting in defaultSettings ) { if ( defaultSettings . hasOwnProperty ( setting ) ) { if ( ! this . settings . hasOwnProperty ( setting ) ) { this . settings [ setting ] = defaultSettings [ setting ] ; } } } this . ctx = this . canvas . getContext ( "2d" ) ; // Build points array. There's a starting point at 0,0 // plus a point for each step p [ 0 ] = { x : 0 , y : 0 } ; for ( i = 1 ; i <= sp . count ; i ++ ) { interval = i / sp . count ; p [ i ] = { x : interval , y : interval } ; } // Start with a clean slate this . ctx . clearRect ( - 0.5 , - 0.5 , 2 , 2 ) ; this . drawBackground ( ) ; // Draw each interval last = p . length - 1 ; for ( i = 0 , j = 1 ; i < last ; i ++ , j ++ ) { if ( isStart ) { this . drawStartInterval ( p [ i ] . x , p [ i ] . y , p [ j ] . x , p [ j ] . y ) ; } else { this . drawEndInterval ( p [ i ] . x , p [ i ] . y , p [ j ] . x , p [ j ] . y ) ; } } // Each interval draws start and mid point for that interval, // so we need to draw last point. It's always filled. this . drawPoint ( p [ last ] . x , p [ last ] . y , true ) ; }
Paint canvas

@param {Object} settings Paint settings
Paint canvas
This function is the main function of the algorithm