HTML with canvas to fill entire canvas with color



            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="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-->

            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.fillStyle = "green"; //changes the color of canvas
            //Either we can use
            //object.fillRect(0, 0, 500, 500);//it fills the entire canvas with green color
            object.fillRect(0, 0, straightline.width, straightline.height); //it fills the entire canvas with green color


No comments:

Post a Comment