Edit in JSFiddle

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}

var ctx = canvas.getContext("2d");
createColorPanel();

function createColorPanel() {
    ctx.save();
    var myGradient = ctx.createLinearGradient(0, 0, 0, 290);
    myGradient.addColorStop(0, "#FF0000");
    myGradient.addColorStop(0.5, "#00FF00");
    myGradient.addColorStop(1, "#0000FF");
    ctx.fillStyle = myGradient;
    ctx.fillRect(10, 10, 420, 280);
    ctx.restore();
}

<canvas id="myCanvas" width="440" height="300">
    您的浏览器不支持canvas!
</canvas>