Canvas_Gradient

Gradient

Linear Gradient:

By using createLinearGradient() method we can draw a linear gradient. Linear gradient structure is almost similar with the CSS3 linear gradient.
First of all you have to specify the starting point and ending point.Thats means from where gradinet start and where to End.

var ling=mc.createLinearGradient(start X,start Y,ending X,ending Y);

Now you have to specify the color during the path.Gradient start to end is a whole path or road and this is one(1).Now in the way you can give different color but you have to tell in which position of path you are giving the color along with color name.
structure like that

        ling.addColorStop(offset,"color");
        ling.addColorStop(offset,"color");     

Here we save our gradient position within a variable for future use.Then we give different color in different position.Before addColorStop property we use the variable where we stored our gradient position.This mean this color stop if for ling gradient.Remember Starting position is 0 and ending position is 1.
Now your Linear Gradient is ready to use.Then you can use this to fill a Rectangular or arc or your custom shape.Just write fillStyle=your gradient variable name(here is ling).

Sorry your browser does not support canvas tag.Upgrade to latest version pls

<canvas height="350px" id="mc" width="400">
      </canvas>

<script type="text/javascript">

var can=document.getElementById("mc");

var mc=can.getContext('2d');


var ling=mc.createLinearGradient(25,0,20,300);
ling.addColorStop(0,"#ccc");

ling.addColorStop(0.5,"f00");

ling.addColorStop(0.7,"#fff")
mc.beginPath();
mc.fillStyle=ling;
mc.fillRect(20,15,200,180);
mc.fill();



</script>

Radial Gradient:

Radial Gradient is a collection of two circle.The structure like below

CreateRadialGradient(firstcircle Start X,First Circle startY,1st circle Radius,Second circle start X,second Circle start Y,seond circle Radius);
Remember,First circle will be bigger than the second one.Because second is within the boundary of first one.
First of all lets draw two circle by using arch method.

sorry your browser doesnot support canvas tag.

sorry your browser doesnot support canvas tag.

The first box show two circle which is used to later to draw radial gradient.Look carefully that second circle is in the first one and smaller.both  of these center point define by x and y.Play around the number and learn.

sorry your browser does not support.

Here is the two circle and complete radial gradient.

Complete Radial Gradient Project

<canvas id="second" width="400px" height="300px">
</canvas>


<script type="text/javascript">

var can=document.getElementById("mc");


var mc=can.getContext('2d');


//second
var sex=document.getElementById("second");
var sec=sex.getContext("2d");

var tes=sec.createRadialGradient(230,150,150,150,80,10);
        tes.addColorStop(0.1,"black");
tes.addColorStop(0.5,"#fff");
    tes.addColorStop(1,"#f00");
sec.fillStyle=tes;
sec.rect(0,0,450,300);
     
sec.fill();
//Prove our circles where are actually;
sec.beginPath();
sec.strokeStyle="green";
sec.arc(230,150,150,0,2*Math.PI);
sec.stroke();
sec.beginPath();

sec.strokeStyle="black";
sec.arc(150,80,10,0,2*Math.PI);
sec.stroke();
</script>

HTML 5 syllabus