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 />