Draw and Fill a polygon and triangle in HTML5

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>

3 thoughts on “Draw and Fill a polygon and triangle in HTML5”

      1. I have not. Some suggested to draw the triangles just a bit larger so they fill the gaps, but frankly I dont think thats the right solution. Surely there’s a way to use a proper triangle rasterizer in a browser. I’ve tried my own draw routine, but after drawing two triangles(scanline method), the framerate drops to 30. I need to find a way to circumvent javascript, but my lack of skill and experience in javascript leaves my baffled.

Comments are closed.