HTML5 Canvas Gradient Creating Code 



Use This Code To Create Gradient...


window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.beginPath(); // begin custom shape
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(251, 181, 320, 120, 310, 150);
    context.bezierCurveTo(420, 150, 420, 520, 390, 100);
    context.bezierCurveTo(430, 40, 370, 40, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);
    context.closePath(); // complete custom shape
 
    // add linear gradient
    var grd = context.createLinearGradient(230, 0, 370, 200);
    grd.addColorStop(0, "#8ED6FF"); // light blue
    grd.addColorStop(1, "#004CB3"); // dark blue
    context.fillStyle = grd;
    context.fill();
 
    // add stroke
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};