tutorials/js/pipes.js
function(ctx, from, to, width, gradient) {

        var innerWidth = width - 4;
        var outerWidth = width;
        var buttFrom = g.point(from).move(to, -outerWidth / 2);
        var buttTo = g.point(to).move(from, -outerWidth / 2);

        ctx.beginPath();
        ctx.lineWidth = outerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.6)';

        ctx.moveTo(from.x, from.y);
        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        gradient.addColorStop(0.000, 'rgba(86, 170, 255, 1)');
        gradient.addColorStop(0.500, 'rgba(255, 255, 255, 1)');
        gradient.addColorStop(1.000, 'rgba(86, 170, 255, 1)');

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = gradient;
        ctx.moveTo(from.x, from.y);

        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        ctx.lineCap = "square";

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(from.x, from.y);
        ctx.lineTo(buttFrom.x, buttFrom.y);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(to.x, to.y);
        ctx.lineTo(buttTo.x, buttTo.y);
        ctx.stroke();
        ctx.closePath();
    }
function(ctx, from, to, width, gradient) {

        var innerWidth = width - 4;
        var outerWidth = width;
        var buttFrom = g.point(from).move(to, -outerWidth / 2);
        var buttTo = g.point(to).move(from, -outerWidth / 2);

        ctx.beginPath();
        ctx.lineWidth = outerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.6)';

        ctx.moveTo(from.x, from.y);
        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        gradient.addColorStop(0.000, 'rgba(86, 170, 255, 1)');
        gradient.addColorStop(0.500, 'rgba(255, 255, 255, 1)');
        gradient.addColorStop(1.000, 'rgba(86, 170, 255, 1)');

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = gradient;
        ctx.moveTo(from.x, from.y);

        ctx.lineTo(to.x, to.y);
        ctx.stroke();
        ctx.closePath();

        ctx.lineCap = "square";

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(from.x, from.y);
        ctx.lineTo(buttFrom.x, buttFrom.y);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = innerWidth;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.moveTo(to.x, to.y);
        ctx.lineTo(buttTo.x, buttTo.y);
        ctx.stroke();
        ctx.closePath();
    }
function ( ctx , from , to , width , gradient ) { var innerWidth = width - 4 ; var outerWidth = width ; var buttFrom = g . point ( from ) . move ( to , - outerWidth / 2 ) ; var buttTo = g . point ( to ) . move ( from , - outerWidth / 2 ) ; ctx . beginPath ( ) ; ctx . lineWidth = outerWidth ; ctx . strokeStyle = 'rgba(0,0,0,0.6)' ; ctx . moveTo ( from . x , from . y ) ; ctx . lineTo ( to . x , to . y ) ; ctx . stroke ( ) ; ctx . closePath ( ) ; gradient . addColorStop ( 0.000 , 'rgba(86, 170, 255, 1)' ) ; gradient . addColorStop ( 0.500 , 'rgba(255, 255, 255, 1)' ) ; gradient . addColorStop ( 1.000 , 'rgba(86, 170, 255, 1)' ) ; ctx . beginPath ( ) ; ctx . lineWidth = innerWidth ; ctx . strokeStyle = gradient ; ctx . moveTo ( from . x , from . y ) ; ctx . lineTo ( to . x , to . y ) ; ctx . stroke ( ) ; ctx . closePath ( ) ; ctx . lineCap = "square" ; ctx . beginPath ( ) ; ctx . lineWidth = innerWidth ; ctx . strokeStyle = 'rgba(0,0,0,0.5)' ; ctx . moveTo ( from . x , from . y ) ; ctx . lineTo ( buttFrom . x , buttFrom . y ) ; ctx . stroke ( ) ; ctx . closePath ( ) ; ctx . beginPath ( ) ; ctx . lineWidth = innerWidth ; ctx . strokeStyle = 'rgba(0,0,0,0.5)' ; ctx . moveTo ( to . x , to . y ) ; ctx . lineTo ( buttTo . x , buttTo . y ) ; ctx . stroke ( ) ; ctx . closePath ( ) ; }
A drawing function executed for all links segments.
A drawing function executed for all links segments .