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. 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 other more 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.

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. 

<script type=”text/javascript”>

window.onload=function() {
var canvas=document.getElementById(“canvas”);
var context=canvas.getContext(“2d”);

context.beginPath();
context.lineTo(10,10);
context.lineTo(290,10);
context.stroke();
</script>

<canvas height=”100″ id=”canvas” width=”300″>
<b>Canvas Not Supported By This Browser</b>
</canvas>

window.onload=function() {
var canvas1=document.getElementById(“canvas1”);
var context1=canvas1.getContext(“2d”);

context1.beginPath();
context1.lineTo(10,10);
context1.lineTo(290,10);
context1.stroke();

var canvas2=document.getElementById(“canvas2”);
var context2=canvas2.getContext(“2d”);

context2.strokeStyle=”blue”;
context2.fillStyle=”red”;
context2.lineWidth=10;
context2.beginPath();
context2.lineTo(20,10);
context2.lineTo(160,290);
context2.lineTo(290,10);
context2.closePath();
context2.stroke();
context2.fill();

var canvas3=document.getElementById(“canvas3”);
var context3=canvas3.getContext(“2d”);

context3.fillStyle=”green”;
context3.beginPath();
context3.rect(10,10,200,200);
context3.fill();

var canvas4=document.getElementById(“canvas4”);
var context4=canvas4.getContext(“2d”);

context4.fillStyle=”pink”;
context4.beginPath();
context4.arc(150,150,100,0,Math.PI*2,true);
context4.fill();
context4.stroke();
}

Canvas Not Supported By This Browser

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.  

<script type=”text/javascript”>

window.onload=function() {
var canvas=document.getElementById(“canvas”);
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>

<canvas height=”300″ id=”canvas” width=”300″>
<b>Canvas Not Supported By This Browser</b>
</canvas>

Canvas Not Supported By This Browser

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.

<script type=”text/javascript”>

window.onload=function() {
var canvas=document.getElementById(“canvas”);
var context=canvas.getContext(“2d”);

context.fillStyle=”green”;
context.beginPath();
context.rect(10,10,200,200);
context.fill();
}
</script>

<canvas height=”300″ id=”canvas” width=”300″>
<b>Canvas Not Supported By This Browser</b>
</canvas>

Canvas Not Supported By This Browser

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 canvas element written within HTML5 code.

<script type=”text/javascript”>

window.onload=function() {
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>

<canvas height=”300″ id=”canvas” width=”300″>
<b>Canvas Not Supported By This Browser</b>
</canvas>

Canvas Not Supported By This Browser

Read More:How To Fill Gradient Color On HTML5 Canvas Shapes