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.

canvas patterns

Canvas Pattern 

What is pattern?

By using pattern () method you can able to create your own pattern.

Simply it is a shape and you may use repeatly. Suppose you create a circle with some effect and now you want to use this circle to fill up a rectangular then you have to use the create circle as a pattern.

Structure:

We can create a pattern by calling create pattern method.It holds two arguments.First the source of pattern then repeat option like 

repeat,no-repeat,repeat-x,repeat-y.

createPattern(Obj, repeatOption);

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

Here we create our own shape(single bottom right) and then use this shape as an object of create pattern method.
You can use image as an object.In this case you have to save the image location in a variable and then use this pattern in fillStyle or strokeStyle
like fillStyle=pattern variables name.