Sunday , 18 March 2018
Home / Programming / JavaScript / Gradients – Advanced JavaScript Tutorial

Gradients – Advanced JavaScript Tutorial

Gradients allow you to create fills with multiple colors. Not only that, it takes care of transitioning from 1 color to the next. There are 2 kinds of gradients which are linear and radial. We’ll learn how to do both in this tutorial.

Linear Gradients

Clear your script and add this bit of code.

Alright a couple of things are going here. First, you need to use the createLinearGradient() method to create linear gradients. This method has 4 parameters. The first and second parameters are the x and y coordinates for where the gradient should start. The third and fourth parameters are the x and y coordinates for where the gradient should end.

In our example, we set the starting point to the top left corner of the canvas and the end point to the bottom right corner of the canvas. Of course, you can set these points anywhere  you like, but we’ll keep things simple.

Unlike the fillStyle and strokeStyle properties, the createLinearGradient() will return a Gradient object. So, we store this in a variable called gradient. Next, we have to start applying colors to this gradient. The addColorsStop() method is a method in the Gradient object. This method has 2 parameters.

The first parameter is the position to start from. In gradients the starting position is 0 and the ending position is 1. You can input any numbers in between.  You can add as many colors as you want, but in our example, we keep it simply by using black and white.

To apply the gradient to all future drawings, then we assign the filleStyle property to our gradient object. Now, we just draw our rectangle like usual and you should see our gradient.

A couple of things to note. The gradient applies to the whole canvas. However, when you set the fill color to the gradient and draw an object, only the part of the gradient the drawing covers will appear. For example, let’s change our 1 rectangle to 3 like so.

Check your page and you should see what I mean. So, it’s imperative you use the right coordinates for both your gradients and drawings.

Radial Gradients

Let’s update our code to this.

Like last time, we have to store the gradient in a variable. To create a radial gradient you use the createRadialGradient() method. This method has 6 parameters which are all required. The first 2 parameters are the x and y coordinates for the center of the first circle. The third parameter is the radius of that circle. The fourth and fifth parameters are the x and y coordinates for the second circle. The sixth parameter is the radius for that circle.

Why 2 circles?

A radial gradient works by drawing 2 circles. The space between these 2 circles will be where the gradients are applied. Then, like usual, you can start applying colors using the addColorsStop() method.

We apply our gradient to the fill style and then draw a rectangle. Like linear gradients the gradient will be applied to the canvas. So, depending on the drawing, we will only have the gradient colors it’s on.


Due to the complexity of gradients, you should experiment with the values. If you have something like Photoshop or Illustrator, then you should test colors on those programs before using them on the web. For more information on gradients, then go here.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to create web applications with Node.js and SQL? Check out my course!
Get 93% off my course. You'll also learn how to build real world applications using Node and SQL. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!