- Trending Categories
- Data Structure
- Operating System
- 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
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 −
|height||pixels||Specifies height of the canvas.|
|width||pixels||Specifies width of the canvas.|
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>
- How to use images with HTML5 canvas?
- How to use multiple click event on HTML5 canvas?
- Can we delete the “getContext” property of HTML5 Canvas tag through script?
- HTML5 tag
- HTML canvas Tag
- How can I use the HTML5 canvas element in IE?
- How to center canvas in HTML5?
- HTML5 Canvas to PNG File
- HTML5 Canvas fit to window
- How to use GoJS HTML5 Canvas Library for drawing diagrams and graphs?
- Working with tag in HTML5
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- Why do we use head tag in HTML Page?