Demo - Linear, Radial Gradient Cancas Tutorial 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>

Beginners guide to HTML5 Canvas - Draw shapes


Learn to draw Lines in Canvas