How To Draw Lines And Shapes Using HTML5 Canvas

The canvas element in HTML5 is used to render simple graphics such as line art, graphs, and other custom graphical elements on the client-side web development. You can draw lines and shapes using HTML5 canvas. With <canvas> tag, you can simply put the element in the page, name it with an id attribute and define its dimensions with height and width attributes. Along with placing a <canvas> tags in a document, you have to use JavaScript code to access and draw lines and shapes.

HTML5 defines a complete API for drawing on a canvas element such as lines, triangles, rectangle, and circle, which is composed of many individual sub-API for common tasks. To draw lines and shapes using HTML5 canvas, the path API must be used. The path API stores a collection of subpaths formed by various shape functions.

Here are the various shape functions used in JavaScript code which can be used to draw lines, triangle, rectangles and circles.

context.beginPath() – This function is used to begin a path.
context.lineTo() – This function is used to draw line.
context.stroke() – This function will display the path as a newly created shape.
context.closePath() – This function will connect the last point and first point.
context.fill() – This function will be filled in with whatever the fill color is or black if none is specified.

Table of Contents

How To Draw Line Using HTML5 Canvas

Following is an example code which draws a line using HTML5 canvas. The functions “context.beginPath()”, “context.lineTo()” and “context.stroke()” used within a JavaScript function draws a line, which was embedded within canvas element written within HTML5 code.

<canvas height="100" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.lineTo(10,10);
context.lineTo(290,10);
context.stroke();
</script>

Preview:

How To Draw Triangle Using HTML5 Canvas

Here is an example code which draws a triangle using HTML5 canvas. The
functions “context.beginPath()”, “context.lineTo()”, “context.closePath()”, “context.fill()” and “context.stroke()” used within a JavaScript function draws a triangle filled with red color and blue stroke, which was embedded within canvas element written within HTML5 code.

<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas3");
var context=canvas.getContext("2d");
context.strokeStyle="blue";
context.fillStyle="red";
context.lineWidth=10;
context.beginPath();
context.lineTo(20,10);
context.lineTo(160,290);
context.lineTo(290,10);
context.closePath();
context.stroke();
context.fill();
</script>

Preview:

How To Draw Rectangle Using HTML5 Canvas

Here is an example code which draws a rectangle using HTML5 canvas. The functions “context.beginPath()”, “context.rect()” and “context.fill()” used within a JavaScript function draws a rectangle filled with green color, which was embedded within canvas element written within HTML5 code.

<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="green";
context.beginPath();
context.rect(10,10,200,200);
context.fill();
}
</script>

Preview:

How To Draw Circle Using HTML5 Canvas

Followng is an example code which draws a circle using HTML5 canvas. The functions “context.beginPath()”, “context.arc()”, “context.fill()” and
“context.stroke()” used within a JavaScript function draws a circle filled with pink color, which was embedded within the canvas element written within the HTML5 code.

<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="pink";
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.fill();
context.stroke();
</script>

Preview:

Please follow and like us: