-->
Showing posts with label canvas to draw an arc. Show all posts
Showing posts with label canvas to draw an arc. Show all posts

HTML with canvas to draw arc.

<html>

<head>

    <head>
        <title>
            html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.
        </title>
    </head>

    <body>
        <canvas id="straightline" width="500" height="500" style="border:7px dotted #000089;">
            <!--we always use canvas id for script-->
            <!--since we are going to draw arc, we use attribute width and height with style/css-->
            <!-- here the width and height defines canvas size-->
            <!--since it has no border so-->
            <!--we can use different color with the help of css-->

        </canvas>
        <script>
            var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID
            var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable
            object.beginPath(); //it begins the path
            object.arc(100, 100, 100, 0, Math.PI); //it creates the arc/curve (half circle). We can also use Math.PI/2
            //first value is x-co-ordinate
            //second value is y-co-ordinate
            //third value is radius
            //forth value is starting angle 
            //last value is for one complete rotation/360
            object.stroke(); //it draws the circle
        </script>
    </body>


</html>