Drawing gradients
Here we implement some effects. Applying a gradient is quite a colorful activity. The output of our recipe demonstrating gradients looks like this:
How to do it…
The recipe uses four new methods, namely createRadialGradient(), createLinearGradient(), addColorStop(), and rgb(). The recipe is as follows.
The HTML code:
<html> <head> <title>Gradients</title> <script src="gradients.js"></script> </head> <body onload="init()"> <canvas id="MyCanvasArea" width="500" height="200" style="border:2px solid blue;" > your browser does not support canvas</canvas> <h1>Radial and Linear Gradient</h1> </body> </html>
The JavaScript code:
function init()
{
var can=document.getElementById("MyCanvasArea");
var ctx=can.getContext("2d");
//coordinates of center of 1st circle and a radius
var x1 = 100; // x of 1...
