HTML5

Draw and Fill a polygon and triangle in HTML5

Leave a comment

In HTML 5, we can draw the 2D shape very easily with the help of the canvas element. In the following example demonstrate how to draw a simple polygon shape.
 

Draw Polygon

 

<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
    function drawPolygon() {
        var canvas = document.getElementById('canvasbox');
        if (canvas.getContext) {
            var objctx = canvas.getContext('2d');
 
            objctx.beginPath();
            objctx.moveTo(75, 50);
            objctx.lineTo(175, 50);
            objctx.lineTo(200, 75);
            objctx.lineTo(175, 100);
            objctx.lineTo(75, 100);
            objctx.lineTo(50, 75);
            objctx.closePath();
            objctx.fillStyle = "rgb(200,0,0)";
            objctx.fill();
 
 
        } else {
            alert('You need HTML5 compatible browser to see this demo.');
        }
    }
</script>
</head>
<body onload="drawPolygon();">
   <canvas id="canvasbox"></canvas>
</body>
</html>

The explanation

The above example is using the html 5’s canvas element, you can see from the above how we create an object of the 2d context from the canvas. Others methods which we are using are as follows:

beginPath() paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.
 
drawpolygon

 
moveTo(x, y) this will set the startup position of the path. In the above example we are drawing path from (75,50) point.
 
lineTo(x, y) will draw the straight line where x and y will be end points. This method takes two arguments – x and y, – which are the coordinates of the line’s end point and starting point is dependent on previous drawn path’s end points or moveto(x,y) coordinate. for example
 
objctx.lineTo(175, 50) will draw straight line from startpoint(75,50) to endpoint(175,50).
 
closePath() will close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there’s only one point in the list, this function does nothing.
 
fillStyle will set the background property but will not fill.

fill() will fill the shape according to fillStyle. If there is no fillstyle then it will
fill with black.
 
So above are the explanation for what we are doing for drawing the simple polygon. Now we will draw a new shape tringle.
 

Draw Triangle

 

<!DOCTYPE HTML>
<html>
<head>
<title>An example to draw an polygon</title>
<script type="text/javascript">
    function drawPolygon() {
        var canvas = document.getElementById('canvasbox');
        if (canvas.getContext) {
            var objctx = canvas.getContext('2d');
            objctx.beginPath();
            objctx.moveTo(50, 50);
            objctx.lineTo(50, 125);
            objctx.lineTo(150, 125);
            objctx.closePath();
            objctx.stroke();
 
        } else {
            alert('You need HTML5 compatible browser to see this demo.');
        }
    }
</script>
</head>
<body onload="drawPolygon();">
   <canvas id="canvasbox"></canvas>
</body>
</html>