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"); ...
Get JavaScript Projects for Kids now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.