Canvas Gradients Playground

by Francisco Maria Calisto

HTML

<canvas id="canvas" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px red solid;
}

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');

ctx.fillRect(10, 10, 100, 100);
//
// GRADIENT 1
//
var linGrad = ctx.createLinearGradient(120, 10, 220, 110);

linGrad.addColorStop(0, '#00AAFF');
linGrad.addColorStop(1, 'rgba(160,100,0,1)');

ctx.fillStyle = linGrad;

ctx.fillRect(120, 10, 100, 100);

//
// GRADIENT 2
//
var linGrad2 = ctx.createLinearGradient(230, 10, 230, 110);

linGrad2.addColorStop(0, '#00AAFF');
linGrad2.addColorStop(1, 'rgba(160,100,0,1)');

ctx.fillStyle = linGrad2;

ctx.fillRect(230, 10, 100, 100);

//
// GRADIENT 3
//
var linGrad3 = ctx.createLinearGradient(340, 10, 440, 10);

linGrad3.addColorStop(0, '#00AAFF');
linGrad3.addColorStop(0.5, '#FFAAFF');
linGrad3.addColorStop(0.5, '#FF00FF');
linGrad3.addColorStop(1, 'rgba(160,100,0,1)');

ctx.fillStyle = linGrad3;

ctx.fillRect(340, 10, 100, 100);

//
// GRADIENT 4
//

var radGrad = ctx.createRadialGradient(90,200,40,110,220,100);

radGrad.addColorStop(0, '#A7D30C');
radGrad.addColorStop(0.9, '#019F62');
radGrad.addColorStop(1, 'rgba(1,159,98,0)');

ctx.fillStyle = radGrad;

ctx.fillRect(10, 120, 200, 200);