In our previous article we told about Canvas Element and how to use it to draw Line, Circle, Rectangle and Custom Shapes. If you happened look at the demo codes used in those articles, then you might have come across a property called fillStyle and a method called fill(). fillStyle and fill() was used to fill solid colors for the shapes. Well, the shapes looked nice with those solid colors, but sometimes you might want to decorate it with gradients. In such cases, you can either use CSS3 gradients to create pattern of your choice or use HTML5.
As of now, HTML5 supports Linear and Radial Gradients and this can be achieved using createLinearGradient() and createRadialGradient() methods respectively. Apart from these methods, you also need addColorStop property to insert colors.
Linear Gradient
Consider an imaginary line defined over the canvas, which applies the color in a linear fashion from the starting point to the ending point. To make it simple, lets assume starting color light yellow (#fbd109) and the ending color as dark orange (#e16525); let us also call it as starting color stop and ending color stop. Both these color stops are placed along the imaginary line, say somewhere between 0 and 1; where ‘0’ is the starting point and ‘1’ is the ending point. Filling the color in a linear fashion will provide a gradient starting from light yellow to dark orange. Did I confuse?
Lets have a look at the code now!
<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>In the above code, createLinearGradient takes x-coordinate of the start point, y-coordinate of the starting point, x-coordinate of the end point, y-coordinate of the end point of gradient as parameters. Once the gradient is set to the canvas context, use addColorStop to apply the gradient.
Create Radial Gradient
Consider two imaginary circles, one is the starting circle and the other is an ending circle. Here, the gradient starts from the starting circle and moves towards the ending circle. To achieve Radial Gradient, we’ll use a method called createRadialGradient().
Checkout the code below,
<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>Before we talk about the code, checkout the demo and come back.
If you carefully notice the radial gradient, you will find nested circles. These were the two imaginary circles we talked in the previous paragraph. Then obviously, you need to specify two circles (x,y) coordinates and a radius isn’t? Well, you got it, that’s what we did in the above code: createRadialGradient(175,100,50,190,100,200).
That’s it! If you like the article, consider sharing it with HTML5 community.
Also read: How to draw Line in Canvas? and Custom Shapes in Canvas.
