Back to: HTML Tutorials
Canvas in HTML with Examples
In this article, I am going to discuss Canvas Graphics in HTML with Examples. Please read our previous article where we discussed Forms in HTML with Examples.
What is HTML Canvas?
With the Html <canvas> element we can draw various graphics on a web page. The canvas> element is simply a container for graphics; to draw the graphics, we need to use a programming language.
The <canvas> tag in HTML 5 is used to draw graphics with a scripting language such as JavaScript. In canvas, users can draw paths, boxes, circles, text, and images using a number of available methods.
Basic HTML Canvas
We use the <canvas> element to create a drawable area in an HTML page. The canvas element has no border and no content by default. The sole purpose of the canvas element is to create an area where we can draw graphics.
In the below example we have used canvas elements to create a simple rectangular canvas. We have used internal styling to add borders around the canvas element. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}
#myCanvas{
border:1px solid black;
width:350px;
height:200px;
}
</style>
<body>
<br>
<canvas id="myCanvas"></canvas>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Add a JavaScript
In the above example, we have created a simple rectangular area but we have not drawn anything inside it. Because With Html canvas we can only create a shape. If we want to draw something inside the canvas, we must use a scripting language called JavaScript.
In the example below we will learn to draw different shapes and text using Html canvas and JavaScript. We will be using some basic concepts of JavaScript if you don’t have any experience with JavaScript then also you can follow along. Check out our JavaScript tutorial to learn more about JavaScript.
Draw a Line
To draw lines and shapes inside the canvas with JavaScript, we must first get the HTML canvas element. This is the very first step and this step will be similar in all the examples below. In the second step, we will select the canvas element using the HTML dom method. We are using the getElementById method, which is useful for getting elements with id attributes.
document.getElementById(“myCanvas”)
The above method selects the HTML element with id myCanvas. In the example below we have created a square canvas and drawn a cross inside it with the help of JavaScript.
- ctx stands for context
- getContext() is a built-in object in HTML having properties and methods for drawing.
- ctx.moveTo(x,y) is used to bring the cursor to a point.
- ctx.lineTo(x,y) is used to draw a line to the specified point from the current point.
- ctx.stroke() is used to draw the path defined.
- x & y are coordinates of points from the x and y-axis respectively.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid slateblue;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
ctx.moveTo(0,200);
ctx.lineTo(200,0);
ctx.stroke();
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Draw a Circle in HTML
In the example below we have created a square canvas and drawn a circle inside it with the help of JavaScript.
Syntax: context.arc(x, y, r, sAngle, eAngle);
- x stands for x-coordinate of the center of the circle.
- y stands for y-coordinate of the center of the circle.
- r stands for the radius of the circle.
- sAngle stands for starting angle, in radians.
- eAngle stands for ending angle, in radians.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid mediumseagreen;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,85,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Draw a Text in HTML
In the example below we have created a rectangular canvas and drawn text inside it with the help of JavaScript. ctx.font is used to define properties for text in the below example we have set font-size 40 px and font-family Arial.
ctx.font = “40px Arial”
ctx.fillText is used to draw plain text graphics on canvas. In the below example we have drawn welcome to dot net tutorials on the screen. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="550" height="100" style="border:1px solid dodgerblue;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("Welcome to Dot Net Tutorials", 15, 60);
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Stroke Text in HTML
In the example below we have created a square canvas and drawn a stroke text inside it with the help of JavaScript. ctx.font is used to define properties for text in the below example we have set font-size 40 px and font-family Arial.
ctx.font = “40px Arial”
ctx.strokeText is used to draw stroke text graphics on canvas. In the below example we have drawn welcome to dot net tutorials on the screen. 15 and 60 are nothing but the positions from the x and y-axis respectively.
ctx.strokeText(“Welcome to Dot Net Tutorials”, 15, 60)
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="550" height="100" style="border:1px solid mediumseagreen;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.strokeText("Welcome to Dot Net Tutorials", 15, 60);
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Draw Linear Gradient in HTML using Canvas
In the example below we have created a square canvas and drawn a circle with a linear gradient inside it with the help of JavaScript.
- ctx.createLinearGradient(x1,y1,x2,y2) is used to define the starting and ending point of a gradient. Where x1,y1,x2,y2 are the coordinates of starting point and ending point respectively.
- ctx.fillRect(x1, y1, x2, y2) is used to select the portion to be filled with gradients. Where x1, y1, x2, y2 are the coordinates of starting point and ending point respectively.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid mediumseagreen;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(70,70,180,180);
grd.addColorStop(0,"black");
grd.addColorStop(1,"red");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Draw Circular Gradient in HTML using Canvas
In the example below we have created a square canvas and drawn a circle with a circular gradient inside it with the help of JavaScript.
- ctx.createRadialGradient(x1,y1,r1,x2,y2,r2) is used to define the starting point, ending point and radius of a circle.
- ctx.fillRect(x1, y1, x2, y2) is used to select the portion to be filled with gradients. Where x1, y1, x2, y2 are the coordinates of starting point and ending point respectively.
For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid transparent;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(100,100,15,105,115,110);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"orange");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);
</script>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Draw Image
In the example below we have created a square canvas and drawn an image inside it with the help of JavaScript.
ctx.drawImage(img,0,0) is used to draw an image, and 0,0 are the coordinates of the starting point of the image. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
flex-direction:column;
}
#myCanvas{
width:250px;
height:300px;
border:5px solid slateblue;
padding:5px;
}
#paint{
display:none;}
</style>
<body>
<img id="paint" src="https://image.freepik.com/free-vector/colorful-abstract-leaves-pattern_23-2149038885.jpg" width="220" height="277">
<canvas id="myCanvas"></canvas>
<p><button onclick="myCanvas()">Click to Draw</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("paint");
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>
Before Clicking
After Clicking
In the next article, I am going to discuss SVG Graphics in HTML with Examples. Here, in this article, I try to explain Canvas Graphics in HTML with Examples and I hope you enjoy this Canvas Graphics in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.