Refer Tutorial
Linear Gradient
<canvas id="lGradient" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('lGradient');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#fbd109');
gradient.addColorStop(1, '#e16525');
context.fillStyle = gradient;
context.fill();
</script>
Read the tutorial now
Radial/Circular Gradient
<canvas id="rGradient" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('rGradient');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var gradient = context.createRadialGradient(175,100,50,190,100,200);
gradient.addColorStop(0, '#fbd109');
gradient.addColorStop(1, '#e16525');
context.fillStyle = gradient;
context.fill();
</script>