Let's draw something new. We will draw a rectangle and make its color fade gradually. Type the following code in your <script></script> tags:
<script type="text/javascript">
var c = document.getElementById("canvasTest");
var canvasElement = c.getContext("2d");
// Create the gradient
var grdient = canvasElement.createLinearGradient(0,0,100,0);
grdient.addColorStop(0,"blue"); // here we added blue as our primary color
grdient.addColorStop(1,"white"); //here we used white as our secondary color.
// Fill with gradient
canvasElement.fillStyle = grdient;
canvasElement.fillRect(10,10,150,80);
</script>We added canvasElement.createLinearGradient(0,0,100,0); to create the gradient or fading. We added grdient.addColorStop(0,"blue"); and grdient.addColorStop(1,"white"); to color the rectangle.
The output of the code is as shown in the following image:
