HTML5 Canvas Tutorial - How do i work with HTML Canvas

Published October 25, 2021

Canvas element in the html5 allows us to render dynamic 2d shapes inside webpage using Javascript. In this Html canvas tutorial we will cover create different shapes with html canvas tag. The html <canvas> element tag is used to draw graphics.

We will cover

HTML Canvas draw line
HTML canvas rectangle
HTML canvas draw paths

Let's create different canvas tutorial examples

Draw a HTML Canvas

<!DOCTYPE HTML>
<html>
 <head>
     <head>
    <meta charset="UTF-8">
    <title>Html5 Canvas Tutorial</title>
</head>
 <style>
 #canvas_id{border:1px solid blue;}
 </style>
 </head>
 <body style="text-align:center;">
 <h2> HTML5 Canvas Element</h2>
 <canvas id="canvas_id" width="200" height="200"></canvas>
 </body>
</html>

This will give below output

HTML5 Drawing Rectangles

To draw rectangle on the canvas has provided methods

fillRect(x,y,width,height): This canvas method will used to draw a rectangle with fill shape

strokeRect(x,y,width,height): This method will used to create outline rectangle

clearRect() : This canvas method will used to create transparent rectangle

In the above canvas methods x and y params are the position of the canvas from top-left position and width and height are the Canvas height and width respectively.

Canvas Example to Draw simple Rectangle

<!DOCTYPE HTML>
<html>
 <head>

    <style>
 #test {
 width: 200px;
 height:200px;
 margin: 20px auto;border:1px solid blue;
 }
 </style>

 <script type="text/javascript">
 function drawRectangleShape(){

 // Get the canvas element using the DOM
 var canvas = document.getElementById('canvas_id');
 // Check browser support canvas or not
 if (canvas.getContext){

 // use getContext to use the canvas for drawing
 var ctx = canvas.getContext('2d');
 // Draw shapes
 ctx.fillStyle = "#FF0000";

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeStyle = "#228B22";
 ctx.strokeRect(50,50,50,50);
 }

 else {
 alert('You need Safari or Firefox 1.5+ to see this demo.');
HTML5
69
 }
 }
 </script>
 </head>

 <body id="test" onload="drawRectangleShape();" style="padding:10px; text-align:center; color:#000;" >
 <canvas id="canvas_id"></canvas>

 </body>
</html>

Output:

Canvas Draw Paths:

fill() : This canvas method will used to Fills the current drawing (path)
stroke() : This canvas method will used to draws the path you have defined
beginPath()   This canvas method will used to Begins a path, or resets the current path
moveTo()   This canvas method will used to Moves the path to the specified point in the canvas, without creating a line
closePath()   This canvas method will used to Creates a path from the current point back to the starting point
lineTo()   This canvas method will used to Adds a new point and creates a line to that point from the last specified point in the canvas
clip()   This canvas method will used to Clips a region of any shape and size from the original canvas
arc()   This canvas method will used to Creates an arc/curve (used to create circles, or parts of circles)
arcTo()   This canvas method will used to Creates an arc/curve between two tangents
isPointInPath()   This canvas method will Returns true if the specified point is in the current path, otherwise false

Canvas path example to draw a shape

<!DOCTYPE HTML>
<html>
 <head>

   <style>
 body {
 width: 100px;
 height:100px;
 margin: 0px auto;
 }
 </style>

 <script type="text/javascript">
 function drawShape(){
 // get the canvas element using the DOM
 var canvas = document.getElementById('canvas_id');
 // Make sure we don't execute when canvas isn't supported
 if (canvas.getContext){
 // use getContext to use the canvas for drawing
 var ctx = canvas.getContext('2d');
 // Draw shapes
 ctx.strokeStyle = "#FF0000";
 ctx.beginPath();

 ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle

 ctx.moveTo(110,75);

 ctx.arc(75,75,35,0,Math.PI,false); // Mouth

 ctx.moveTo(65,65);
 ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye

 ctx.moveTo(95,65);
 ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye

 ctx.stroke();
 }
 else {
 alert('You need Safari or Firefox 1.5+ to see this demo.');
 }
 }
 </script>
 </head>
 <body  onload="drawShape();">
 <canvas id="canvas_id"></canvas>
 </body>


</html>

output:

Canvas Draw Lines

lineCap()   This canvas method used to Sets or returns the style of the end caps for a line
lineJoin()   This canvas method used to Sets or returns the type of corner created, when two lines meet
lineWidth()   This canvas method used to Sets or returns the current line width
miterLimit() This canvas method used to Sets or returns the maximum miter length

Example to draw lines on canvas

<!DOCTYPE HTML>
<html>
 <head>
<style>
 body {
 text-align:center;
 height:100px;
 margin: 20px auto;
 }
 </style>

 <script type="text/javascript">
 function drawShape(){
 // get the canvas element using the DOM
 var canvas = document.getElementById('canvas_id');

 // Make sure we don't execute when canvas isn't supported
 if (canvas.getContext){

 // use getContext to use the canvas for drawing
 var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#FF0000";
 for (i=0;i<10;i++){
 ctx.lineWidth = 1+i;
 ctx.beginPath();
 ctx.moveTo(5+i*14,5);
 ctx.lineTo(5+i*14,140);
 ctx.stroke();
 }
 }

 else
 {
 alert('You need Safari or Firefox 1.5+ to see this demo.');
 }
 }
 </script>
 </head>
 <body  onload="drawShape();">
 <h2>HTML5 Canvas Tutorial to draw lines</h2>
 <canvas id="canvas_id"></canvas>
 </body>


</html>

Output:

Conclusion: In this HTML canvas tutorial we covered how to use html canvas tag to draw rectangle, lines and paths on canvas.

Article Contributed By :

1048 Views