HTML5 CANVAS Part 2

Canvas Path
To draw a straight line in canvas we use following

• moveTo(x,y) starting point of the line.
• lineTo(x,y) end point of the line.
• stroke() is used to draw the actual line.

The below is the code to draw lines

<canvas ID="canvas_1" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas>

<script>
var c= document.getElementById("canvas_1");
var ctx = c.getContext("2d");

//this draw the first line
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

//this draw the second line
ctx.moveTo(300,0);
ctx.lineTo(0,150);
ctx.stroke();
</script>
End of Draw Line section

Draw a Circle
To draw a circle we have to use following functions

• beginPath()set the new context point.
• arc(x,y,r,start,stop)to define how the circle will be drawn.
• stroke() draw the circle.

<canvas ID="canvas_circle" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas> <script>
var c=document.getElementById("canvas_circle");
var ctx= c.getContext("2d");

//This fill Rectangle Rectangle.

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,150);

//This draws Circle.

ctx.beginPath();
ctx.arc(150,75,70,0,2*Math.PI);
ctx.stroke();
</script>

End of Draw Circle section