HTML with canvas to draw straight line.



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

        <canvas id="straightline" width="200" height="200" style="border:7px dotted #000089;">
            <!--we always use canvas id for script-->
            <!--since we are going to draw square, 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-->

            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.moveTo(0, 0); //it is the starting point of line.
            object.lineTo(200, 200); //it is the ending part of line
            object.stroke(); //it draws or connects both the co-ordinates


No comments:

Post a Comment