JavaScript Projects for Kids

Draw linear gradient

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"); ...