Quadratic curve canvas code generator

by J. Jones

HTML

<pre id="code">code</pre>

<canvas id='canvas' height="600" width="600" class="quadratic"></canvas>

CSS

canvas { border: 1px dashed #ddd; background:#f7f7f7; margin: 10px 0; }
#code { padding:10px; background:#000033; border:1px dashed #ffff00; color:#00ff00; width:380px; }

JavaScript

(function() {

    var canvas, c, code, point, style, drag = null, dpoint;
    
    function init(quad) {
        point = {
            p1: { x:20, y: 20 }, /* starting point */
            p2: { x:370, y: 300 } /* end point */
        };
        
        if( quad ) {
            point.cp1 = { x: 370, y: 20 };
        } else {
            point.cp1 = { x: 70, y: 100 };
            point.cp2 = { x: 70, y: 100 };
        }
        
        style = {
            curve: { 
                width: 6, 
                color: 'hsla(216, 91%, 50%, 0.95)'
            },
            circles: {
                width: 6,
                color: '#000',
                fill: 'hsla(100, 93%, 50%, 1)'
            },
            pline: { 
                width: 2, 
                color: ''
            },
            point: { 
                radius: 15, 
                width: 5,
                color: 'hsla(205, 98%, 50%, 0.95)',
                fill: 'rgba(200, 0, 200, .9)',
                arc1: 0,
                arc2: 2 * Math.PI
            }
        }
        
        // line style
        c.lineCap = 'round';
        c.lineJoin = 'round';
        
        // handlers
        canvas.onmousedown = dragStart;
        canvas.onmousemove = dragging;
        canvas.onmouseup = canvas.onmouseout = dragStop;
        
        draw();
    }
    
    function draw() {
    
        c.clearRect( 0, 0, canvas.width, canvas.height );
        
        // bg gradient
        gradient = c.createLinearGradient(0,0,100,200);
        gradient.addColorStop(0, 'hsla(68, 46%, 50%, .2)');
        gradient.addColorStop(1, 'hsla(58, 100%, 50%, .1)');
        c.fillStyle = gradient;
        c.fillRect(0,0,400,500);
        
        // lines
        c.lineWidth = style.pline.width;
        c.strokeStyle = style.pline.color;
        
        c.beginPath();
        c.moveTo( point.p1.x, point.p1.y );
        c.lineTo( point.cp1.x, point.cp1.y );
        
        if( point.cp2 ) {
            c.moveTo(...