Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why to use canvas tag in HTML5?
Specifies height of the canvas.The HTML <canvas> tag is used to draw graphics, animations, etc. using scripting. The <canvas> tag introduced in HTML5.
Let’s see a simple <canvas> element with two specific attributes width and height along with all the core HTML5 attributes like id, name, and class etc.
<canvas id="myCanvas" width="100" height="100"></canvas>
Here are the attributes −
Attribute |
Value |
Description |
height 
|
pixels |
Specifies height of the canvas. |
width 
|
pixels |
Specifies width of the canvas. |
Example
You can try to run the following code to learn how to use canvas to create a rectangle. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas Tag</title>
</head>
<body>
<canvas id = "myCanvas"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>
Updated on: 2020-06-15T11:53:50+05:30
272 Views
Advertisements