jQuery Gradient Creator

HTML Code :

<div id="demo1"></div>
                    

JS Code :

 $(document).ready(function(){
    $('#demo1').gradientCreator(); 
});
                    

HTML Code :

<div id="target"></div>
<p>
    <select id="orientation" onchange="changeOrientation();">
        <option value="horizontal">Horizontal</option>
        <option value="vertical" selected="selected">Vertical</option>
    </select>
</p>
<div id="demo2"></div>
                    

JS Code :

 $(document).ready(function(){
    $('#demo2').gradientCreator({
        gradient: '#ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%',
        target: '#target',
        tooltipGradient: ' #fceabb 0%,#fccd4d 49%,#f8b500 53%,#fbdf93 100%'
    }); 
});

function changeOrientation()
{
    var orientation = $('#orientation :selected').val();
    $('#demo2').data('gradientCreator').setOrientation(orientation);
}
                    

HTML Code :

<div id="demo3"></div>
<p>String gradient :<br/><strong id="stringExport"></strong></p>
<p<Generated Css Code :</p>
<textarea id="cssExport"></textarea<
                    

JS Code :

$(document).ready(function(){
    $('#demo3').gradientCreator({                                
        gradient: '#FFC700 0%,#960303 100%',
        onChange: function(stringGradient,cssGradient) {
            $('#stringExport').html(stringGradient);
            $('#cssExport').html(cssGradient);
        }
    }); 
});
                    

HTML Code :

<canvas id="demoCanvas" width="300" height="180"></canvas>
<p>Sun :</p>
<div id="sunGradient"></div>  
<p>Sky :</p>
<div id="skyGradient"></div>
<p>Ground :</p>
<div id="groundGradient"></div>
                    

JS Code :

$(document).ready(function(){
    // Default Gradients
    var sunGradientPoints = [['0%','#db8300'], ['100%','#ffdd00']];
    var skyGradientPoints = [['0%','#00d2f1'], ['100%','#FFFFFF']];
    var groundGradientPoints = [['0%','#15d215'], ['100%','#013f01']];

    // Gradient Creators initialization
    $('#sunGradient').gradientCreator({
        gradient: sunGradientPoints,
        onChange: function(strColors,cssColors,ArrayColors)
        {
            sunGradientPoints = ArrayColors;
            drawLandscape();   // refresh canvas while sun gradient is changed
        }
    });
    $('#skyGradient').gradientCreator({
        gradient: skyGradientPoints,
        onChange: function(strColors,cssColors,ArrayColors)
        {
            skyGradientPoints = ArrayColors;
            drawLandscape();    // refresh canvas while sky gradient is changed
        }
    });
    $('#groundGradient').gradientCreator({
        gradient: groundGradientPoints,
        onChange: function(strColors,cssColors,ArrayColors)
        {
            groundGradientPoints = ArrayColors;
            drawLandscape();    // refresh canvas while ground gradient is changed
        }
    });

    function drawLandscape() {                                
        var canvas = $('#demoCanvas');
        var ctx = canvas.get(0).getContext('2d');

        // get sky gradient
        var skyGradient = ctx.createLinearGradient(0,0,0,canvas.height());                                
        skyGradient = getGradientFromPoints(skyGradient,skyGradientPoints);                                  
        ctx.fillStyle = skyGradient;

        // draw sky
        ctx.fillRect(0, 0, canvas.width(), canvas.height());
        
        // get ground gradient
        var groundGradient = ctx.createLinearGradient(0,2*canvas.height()/3,0,canvas.height());
        groundGradient = getGradientFromPoints(groundGradient,groundGradientPoints);                             
        ctx.fillStyle = groundGradient;

        // draw ground
        ctx.beginPath();
        ctx.moveTo(0, 2*canvas.height()/3);
        ctx.bezierCurveTo(canvas.width()/3, canvas.height(), 2*canvas.width()/3, canvas.height()/2,
                          canvas.width(), 2*canvas.height()/3);
        ctx.lineTo(canvas.width(),canvas.height());
        ctx.lineTo(0,canvas.height());
        ctx.lineTo(0,canvas.height()/2);
        ctx.fill();

        // get sun gradient
        var sunGradient = ctx.createRadialGradient(3*canvas.width()/4, canvas.height()/4, 0,
                                                   3*canvas.width()/4, canvas.height()/4, 20);                               
        sunGradient = getGradientFromPoints(sunGradient,sunGradientPoints);                         
        ctx.fillStyle = sunGradient;
      
        // draw sun   
        ctx.shadowColor = sunGradientPoints[sunGradientPoints.length-1][1];
        ctx.shadowBlur = 20;
        ctx.beginPath();
        ctx.arc(3*canvas.width()/4, canvas.height()/4, 20, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.shadowBlur = 0;
    }

    function getGradientFromPoints(gradient,gradientPoints)
    {
        // Add each gradient point to the canvas gradient
        $.each(gradientPoints,function (i,point){
            var position = point[0];
            var color = point[1];
            gradient.addColorStop(parseInt(position)/100, color); 
        });     
        return gradient;
    }
});