HTML 5 Canvas Tag

Line Example

<br /> var theCanvas=document.getElementById('myCanvas');<br /> if(theCanvas && theCanvas.getContext)<br /> {<br /> var ctx=theCanvas.getContext("2d");<br /> if(ctx)<br /> {<br /> ctx.strokeStyle ="blue";<br /> ctx.lineWidth=5;<br /> ctx.moveTo(10,10);<br /> ctx.lineTo(150,50);<br /> ctx.lineTo(10,50);<br /> ctx.stroke();<br /> <br /> ctx.strokeStyle="pink";<br /> ctx.lineWidth=15;<br /> ctx.lineJoin="round";<br /> ctx.beginPath();<br /> ctx.moveTo(50,150);<br /> ctx.lineTo(100,60);<br /> ctx.lineTo(125,150);<br /> ctx.stroke();<br /> <br /> ctx.strokeStyle="blue";<br /> ctx.lineWidth=25;<br /> ctx.lineCap="butt"<br /> ctx.beginPath();<br /> ctx.moveTo(250,50);<br /> ctx.lineTo(550,50);<br /> ctx.stroke();<br /> <br /> ctx.strokeStyle="green";<br /> ctx.lineCap="round";<br /> ctx.beginPath();<br /> ctx.moveTo(250,100);<br /> ctx.lineTo(550,100);<br /> ctx.stroke();<br /> <br /> ctx.strokeStyle="darkGray";<br /> ctx.lineCap="square";<br /> ctx.beginPath();<br /> ctx.moveTo(250,150);<br /> ctx.lineTo(550,150);<br /> ctx.stroke();<br /> <br /> <br /> }//end of If<br /> }//end of IF<br />

Arc Example

<br /> var theCanvas=document.getElementById('myCanvas1');<br /> <br /> if(theCanvas && theCanvas.getContext)<br /> {<br /> var ctx=theCanvas.getContext("2d");<br /> if(ctx)<br /> {<br /> ctx.lineWidth = 5;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "red";<br /> ctx.fillStyle = "pink";<br /> ctx.arc(80,60,50,0,2*Math.PI);<br /> ctx.fill();<br /> ctx.stroke();<br /> <br /> ctx.lineWidth = 5;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "green";<br /> ctx.arc(230,60,50,0.8*Math.PI,1.6*Math.PI);<br /> ctx.stroke();<br /> <br /> ctx.lineWidth = 5;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "blue";<br /> ctx.arc(340,60,50,0.2*Math.PI,1.4*Math.PI);<br /> ctx.stroke();<br /> ctx.save();<br /> <br /> ctx.lineWidth = 5;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "yellow";<br /> ctx.arc(450,60,50,0.4*Math.PI,1.9*Math.PI);<br /> ctx.stroke();<br /> ctx.save();<br /> <br /> }//end of If<br /> }//end of IF<br />

Curves Example

<br /> var theCanvas=document.getElementById('myCanvas3');<br /> if(theCanvas && theCanvas.getContext)<br /> {<br /> var ctx=theCanvas.getContext("2d");<br /> if(ctx)<br /> {<br /> var s1 = "Bezier Curve";<br /> ctx.font = "20pt Georgia";<br /> ctx.fillStyle = "green";<br /> ctx.fillText(s1,20,30);<br /> <br /> ctx.lineWidth = 5;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "blue";<br /> ctx.moveTo(20,80);<br /> ctx.bezierCurveTo(120,0,180,150,250,80);<br /> ctx.lineTo(250,80);<br /> ctx.bezierCurveTo(320,0,350,150,400,80);<br /> ctx.stroke();<br /> <br /> var s1 = "Quadratic Curve";<br /> ctx.font = "20pt Georgia";<br /> ctx.fillStyle = "darkRed";<br /> ctx.fillText(s1,380,30);<br /> ctx.lineWidth = 10;<br /> ctx.beginPath();<br /> ctx.strokeStyle = "cyan";<br /> ctx.moveTo(600,30);<br /> ctx.quadraticCurveTo(450,40,550,75);<br /> ctx.lineTo(550,75);<br /> ctx.quadraticCurveTo(650,100,500,120);<br /> ctx.stroke();<br /> }//end of If<br /> }//end of IF<br />

HTML 5 basic

About HTML5

HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML. "HTML5 differences from HTML4" describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public

HTML5 Strcture

HTML4 Strcture

Client Side Scripting

With the use of latest technology concept HTML5, CSS3 and jQuery, we are able to manage Client Side Scripting.

I am developing web pages and web sites with this latest technology also giving Training for this.

so for any question any time u can mail me.

Thanks and regards
Pranav Varma

Android

Hello,

If u want to learn Android concept, If u want be an Android Developer, contact at pranavdv@gmail.com