text and shadow

Text

Until now we draw arch,line create custom shapes,create gradient effect but sometime we need write  some text in the canvas.We can not write as usual in the canvas.You can create  fillText or strokeText effect

fillText(Your text here,X position, Y position);

strokeText(Your text here,X position, Y position);

You can use CSS font rules to Decorate your Text like
font=font-style font-family font-size;
font="bold vardana 45px";

sorry your browser doesnot support canvas tag.

<canvas height="300px" id="fill" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>

<script type="text/javascript">
var sex=document.getElementById("fill");
var sec=sex.getContext("2d");
   sec.fillStyle="green";
   sec.strokeStyle="#900";
  sec.font="bold 40px Tahoma";
 sec.fillText("Bangladesh",25,45);
  sec.strokeText("Dhaka",25,125);

</script>

Shadow

Like css you can give shadow of your shapes or any object and the structure are very much similar.

shdowColor="color name";

shadowBlur= pixel;

shadowOffsetX=pixel (how much far from left to right the shadow will be.Positive number will draw shadow to right side of the object or shape and negative site will draw in left side)

shadowOffsetY=pixel(this means bottom shadow,positive value will draw shadow to bottom,negative will give you top shadow)

sorry your browser doesnot support canvas tag.

<canvas height="300px" id="sha" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>
<script type="text/javascript">
var sex=document.getElementById("sha");
var mc=sex.getContext("2d");
 mc.fillStyle="#d45afa";
mc.shadowColor="#000";
mc.shadowOffsetX=2;
mc.shadowOffsetY=3;
mc.shadowBlur=10;
mc.strokeStyle="#98ffaa";

mc.lineWidth=12;
mc.beginPath();
mc.moveTo(10,10);
mc.lineTo(150,25);
mc.lineTo(150,100);
mc.lineTo(10,125);
mc.closePath();
mc.stroke();

mc.font="bold 35px vardana";
mc.fillText("Dhaka",152,125);


</script>



Closepath method?

Here i use closePath() method .This close the path and join the last line to the moveTo point. 

Suppose your Move TO place is X 10 and Y 10 and You end lines 100 and 120.Now if you use closePath() method after the last line to then there have a automatic line will drawn between where line ends to the starting point.