Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Draw Graphics using Canvas in HTML5?
In HTML5 We can use the canvas element to Draw 2D Graphics on the webpage. To draw the canvas graphics, we use <canvas> tag that creates the interactive graphics, and animation to render it to the web browser. This Canvas element is only available in HTML 5 and not in the previous version. It can generate complex visualization in the field of games and data that helps developers to give visual demonstration of the work. In this article, we will learn how to use canvas element to Draw basic graphic design in 2D using various examples.
Syntax
<canvas id="id_name">……write some text……</canvas>
This element is used to draw geometrical figures. The id selector targets a single element with a given id attribute.
var var_name = getElementById("id_name")
var is the keyword used to define the variable in javascript. var_n 1ame is the variable name sets by the user. The getElementById(“id_name”) matches the specific id.
Properties Used
The following properties used in the example are −
color − Define the color of the text.
width − Define the width of the canvas graphics.
height − Define the height of the canvas graphics.
HTML Canvas Refrences
The following references are used in the example are −
getContext() − This method sets the figure in 2D.
beginPath() − The begin method begins the start path and ends the last path.
rect() − This method draws the rectangle.
stroke() − This method draws the path of canvas graphics.
strokeStyle() − This method fills the color border of the geometrical shape in canvas.
fillStyle() − This method fills the color in the geometrical shape of the figure.
fill() − This method fills the current drawing shape of geometrical in canvas.
lineTo() − This method adds the new line and creates the line from the existing point.
moveTo() − This method moves the specific point in the canvas.
closePath() − This method creates a path from the recent point and back to the start point.
Example 1
In the following example, the code shows how to draw a rectangle using HTML5 canvas and JavaScript. The heading of the webpage is "Canvas Shapes" and the text "Rectangle using Canvas" is in red. The code generates a canvas element with the ID "rectangle" and dimensions of 200 pixels in width and height. The "rect()" method in JavaScript is used to draw the rectangle on the canvas while indicating its position, width, and height. Finally, the rectangle is drawn using the standard black color by calling the "stroke()" method.
<!DOCTYPE html>
<html>
<title>Rectangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h3>Rectangle</h3>
<canvas id="rectangle" width="200" height="200" />
<script>
var rg = document.getElementById("rectangle");
var rect = rg.getContext("2d");
rect.beginPath();
rect.rect(10, 10, 170, 100);
rect.stroke();
</script>
</center>
</body>
</html>
Example 2
In the following example using HTML and JavaScript, the below code creates a canvas element with a red circle drawn inside it. The circle has a radius of 50 pixels and is centered at (150, 150). The strokeStyle property is used to outline the circle in dark blue, while the fillStyle property fills the circle with red. To draw a circle, use the arc() method and specify the center point, radius, and starting and ending angles in radians. The canvas tag has the id "circle", which is used to access the canvas element in JavaScript code. To horizontally center the canvas element on the webpage, the code is enclosed within a center tag.
<!DOCTYPE html>
<html>
<title>Cirle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h2>Circle</h2>
<canvas id="circle" width="290" height="250" >
<script>
var cle = document.getElementById("circle");
var ctx = cle.getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2*Math.PI );
ctx.strokeStyle = 'darkblue ';
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
</center>
</body>
</html>
Example 3
In the following example, the below code shows how to draw a triangle on an HTML5 canvas using JavaScript. The web page has the title "Triangle Using Canvas" and a green heading with the text "Canvas Shapes." The code generates a canvas element with the ID "triangle" and dimensions of 100 pixels by 200 pixels. The triangle is drawn with JavaScript, beginning with the "moveTo()" method to set the pen's initial position, followed by the "lineTo()" method to draw lines connecting the triangle's vertices. Finally, the triangle outline is drawn using the "stroke()" method. The "closePath()" method is used to close the triangle's path, thus completing the shape.
<!DOCTYPE html>
<html>
<title>Triangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:green;">Canvas Shapes</h1>
<h2>Triangle</h2>
<canvas id="triangle" width="100" height="200" >
<script>
var tr = document.getElementById("triangle");
var tri = tr.getContext("2d");
tri.beginPath()
tri.moveTo(0, 50);
tri.lineTo(50, 0);
tri.lineTo(100, 50);
tri.lineTo(0, 50);
tri.stroke();
tri.closePath();
</script>
</center>
</body>
</html>
Conclusion
We explored all these three examples by drawing the different shapes of canvas graphics. Then we saw how we used the references to set the properties of canvas graphics. The canvas element was styled using CSS properties. The above geometrical figures were drawn by Cavas but the same also be drawn by using SVG elements.
383 Views
