- Trending Categories
- Data Structure
- Operating System
- MS Excel
- C Programming
- 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.
<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")
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.
<!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>
<!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>
<!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>
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.
Kickstart Your Career
Get certified by completing the courseGet Started