HTML5 Canvas Element

After going through the previous chapter now you may have a solid understanding of BDI Element. So now just lets learn another big boom of the HTML5 the CANVAS Element, the another solution of graphical representation.

<canvas> .... </canvas>

The another solution of graphical representation has been introduced with the develpment ofHTML5 as CANVAS Element. The CANVAS Element is incomplete without writing the JavaScript along with. So the CANVAS Element always followed by JavaScript also. The use of CANVAS Element has been built specially for graphical representation. A lot more affords has been reduced to use external plug-in like Photoshop and another Graphic Softwares. Still there is lot more can't be done with canvas but as creating the normal frame and graph it is sufficient. The another Element for graphical representation is SVG also. We will learn it in latter chapter and will try to do a snap differences between these elements also.

Here is the Syntax for CANVAS Element

<canvas>

Some Text here

</canvas>

<script>

Some codes of JavaScript

</script>

Below is complete syntax alogn with example

<!DOCTYPE html>

<html>

<head>

<title>Title name will go here</title>

</head>

<body>

<canvas id="canvasuses" width="180" height="90">

<p>Your browser does not support the HTML5 canvas element.</p>

</canvas>

<script type="text/javascript">

var c=document.getElementById("canvasuses");

var canvOK=1;

try {c.getContext("2d");}

catch (er) {canvOK=0;}

if (canvOK==1)

{

var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"green");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

}

</script>

</body>

</html>

Professional I.T. Tutorials