In HTML5, we have some built-in elements which can draw graphics on the web page, and <canvas> is one of those elements. Before <canvas> element, we have to depend on CSS and JavaScript to create basic graphics completely.
What is <canvas>?
Although
<canvas>
is an HTML element but it uses JavaScript to draw graphics. With the help of <canvas> element, we can create a simple graphic on the fly.
<canvas>
stand-alone is not capable of creating fully-fledged graphics. It is only a container we also need to use JavaScript with it. With canvas, we get different methods to draw paths. Circles, text, images, and circles.
Examples
Draw a Rectangle or Square
The canvas covers a rectangular area as a container, which means with a simple
<canvas>
element we can create a rectangular or square box.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#rect{
border: solid red;
}
</style>
</head>
<body>
<canvas id="rect" width="200" height="100"> </canvas>
</body>
</html>
Preview
By default, the canvas has no border, so we need to provide styling to it. It is also very important to provide an
id
or
class
to the canvas element because we need to style or script it.
Draw a Line
To draw a line using the canvas element, we have to use JavaScript.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#line {
border: solid red;
}
</style>
</head>
<body>
<canvas id="line" width="200" height="100"> Does not Support Canvas</canvas>
<script type="text/javascript">
var l = document.getElementById("line");
var line = l.getContext("2d");
line.moveTo(0, 0);
line.lineTo(200, 100);
line.stroke();
</script>
</body>
</html>
Draw a Circle
To draw a circle within the container of <canvas>, we need to use JavaScript methods.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#circle
{
border: solid red;
}
</style>
</head>
<body>
<canvas id="circle" width="200" height="100"> Does not Support Canvas</canvas>
<script type="text/javascript">
var circle = document.getElementById("circle");
var x = circle.getContext("2d");
x.beginPath();
x.arc(95, 50, 40, 0, 2 * Math.PI);
x.stroke();
</script>
</body>
</html>
Draw a Text
With JavaScript and <canvas> we can draw text, and display it inside the <canvas> container.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#text {
border: solid red;
}
</style>
</head>
<body>
<canvas id="text" width="220" height="100"> Does not Support Canvas</canvas>
<script type="text/javascript">
var t = document.getElementById("text");
var text = t.getContext("2d");
text.font = "30px Arial";
text.fillText("TechGeekBuzz", 10, 50);
</script>
</body>
</html>
Summary
-
<canvas>element is used to create graphics on the web page. - It only acts as a container for the graphic.
- Canvas requires JavaScript for its graphic designing.
- An old version of the browser may not support canvas.