Wednesday, March 13, 2013

Canvas | Text API

Canvas API is providing feature of displaying text on Canvas. There are two methods (1) fillText and strokeText. fillText method will fill up the text with specified color while StrokeText will only apply outline to text. by using both methods, we can display text with filled color and outline with different color.

Below example will demonstrate you that whatever text you will enter will be displayed in canvas with Red color. here i have applied shadow as well.

Enter the title you want to display on canvas in text field and then click on "Click me" button will draw text on canvas.

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas | Text  Example</title>
</head>
<body>
<label for="txtTitle" id="lblTitle">Enter Title</label>
<input type="text" id="txtTitle" width="50"/>
<input type="button" id="btnOk" value="&nbsp;Click Me&nbsp;" onclick="fnClick()" />
</br>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>


function fnClick()
{
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.

var oTitle = document.getElementById("txtTitle").value; //get value of title entered by user
oContext.clearRect(0,0,500,500); //remove the content of canvas before drawing new text
oContext.font = "bold 60px tahoma"; //set font family, size and weight
oContext.fillStyle = "rgba(255,0,0,1)"; //set color to be filled
oContext.lineWidth = 2 ; //set border of the text
oContext.strokeStyle="rgba(0,0,0,1)"; //text outline color
oContext.shadowOffsetX = 10; //set shadowOffsetX
oContext.shadowOffsetY = 10; //set shadowOffsetY
oContext.ShadowBlur = 7; //blurness of shadow
oContext.shadowColor = "rgba(255,0,0,.5)"; //shadow color.
oContext.fillText(oTitle,100,100); //draw text at x-100 and y-100 location.
oContext.strokeText(oTitle,100,100); //draw outline text.
}
</script>
</html>

Monday, March 11, 2013

Canvas | Square or Rectangle Example

In HTML5, there are tools using them we can draw different shapes like square, rectangle, triangle and circles. I would first start with Square and rectangle shapes. below example will show you how to draw square and rectangle on Canvas and apply color to shape border.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
oContext.strokeStyle = "#00ff00";  //color of border, applied Green color
oContext.strokeRect (100,250, 200,100); //will draw horizontal rectangle
oContext.strokeStyle = "#0000ff";  //color of border, applied Blue color
oContext.strokeRect (350,100, 100,200); //will draw horizontal rectangle


</script>
</html>

Above example shows square and rectangle shapes. now i will show you how to apply shadow to shapes.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.shadowOffsetX = 10; // X offset
oContext.shadowOffsetY = 10; // Y offset
oContext.shadowColor = "rgba(255,0,0,.4)"; // parameters of rgba function are Red, Green, blue and level of Opacity
oContext.shadowBlur = 10; // at what level, shadow to be blurred.
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
</script>
</html>