EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

Canvas Tag in HTML

Home » Software Development » Software Development Tutorials » HTML Tutorial » Canvas Tag in HTML

Canvas Tag in HTML

Introduction to Canvas Tag in HTML

Canvas means drawing images on the browser pages. The Canvas Tag in HTML is one such element that provides HTML with a bitmap surface, like a blank canvas consisting map of pixels, which might contain more than two colors, to work with. The <canvas> element is used to create graphical images on the web pages with the help of scripting language, like Java Script. The <canvas> element creates an empty canvas to work with, like a container for graphics but you will require to use java script for the actual creation, drawing the graphics, images, etc.

Initially HTML does not support canvas, but later HTML5 introduced this canvas feature. This <canvas> tag in HTML5 is used to draw graphics by using JavaScript scripting. We can also draw images with this canvas tag. Make canvas elements beautiful one can use animation, graphics, photo manipulation, data visualization.This canvas feature initially introduced in Web Kit through Apple Company.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Real Time Example:Instead of writing standalone code for implementing graphics for each and every shape, it will become overload on the processor. So to overcome this kind of situations developers come up with canvas tag in HTML. Less code can be give us exact graphic animation shape.

Syntax

Canvas featurein HTML is working by applying <canvas> tag and scripting to the user required shape with graphics.

<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=””
//code
</canvas>
<script>
//script code for animations and graphics
</script>

Examples to Implement Canvas Tag in HTML

Here are the example:

Example #1

Circle inside rectangle with Canvas Example:

 Code:

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: green;
text-align:center;
}
p
{
color:brown;
border: solid 2px blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Circle Shape inside Rectangle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
</script>
</body>
</html>

Popular Course in this category
HTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (5,742 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)

 Output:
Canvas Tag in HTML1

Example #2

Text inside the circle shape with Canvas Example:

Code:

/strong><!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: red;
text-align:center;
}
p
{
color:green;
border: solid 2px maroon;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Text Inside the Circle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
creatingCircle.font = "30px Arial";//Creating a font
creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle
</script>
</body>
</html>

Output:

Canvas Tag in HTML2

Example #3

Draw the line with Canvas Example:

Code: 

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: blue;
text-align:center;
}
p
{
color:red;
border: solid 2px orange;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Draw the Line with Canvas
</h1>
<canvas id="lineID" width="400" height="400" style="border:2px solid orange;">
</canvas>
<script>
var line = document.getElementById("lineID");// with id drawing line shape with script
var lineCreate = line.getContext("2d");//get the line type from 2d shape
lineCreate.moveTo(0,0);//move the line
lineCreate.lineTo(400,400);//Where to where line has to move
lineCreate.stroke();//line stroke
</script>
</body>
</html>

Output:

the line

Example #4

Triangle shape with Canvas Example:

Code: 

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: fuchsia;
text-align:center;
}
p
{
color:blue;
border: solid 2px skyblue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Triangle Shape with Canvas
</h1>
<canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;">
</canvas>
<script>
var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script
if (canvas.getContext)
{
var traingle = canvas.getContext('2d');//get the traingels type from 2d shape
//Creating the traingle
traingle.beginPath();
traingle.moveTo(25,25);
traingle.lineTo(105,25);
traingle.lineTo(25,105);
traingle.fill();
// Triangle can be stroked with below fuctions
traingle.beginPath();
traingle.moveTo(125,125);
traingle.lineTo(125,45);
traingle.lineTo(45,125);
traingle.closePath();
traingle.stroke();
} else
{
alert('Your browser does ot support this feature');//alert the user
document.write('Your browser does ot support this feature');//display the output
}
</script>
</body>
</html>

Output:

Triangle shape

 Conclusion

Canvas tag is introduced in HTML5 version. Both canvas and JavaScript code gives you accurate shapes to draw with canvas tag. We can draw circle, rectangle, line, triangle shapes etc.

Recommended Articles

This is a guide to Canvas Tag in HTML. Here we discuss the introduction to Canvas Tag in HTML along with Syntax, and examples. You can also go through our other related articles to learn more –

  1. map Tag in HTML
  2. HTML Padding
  3. Frame Tag in HTML
  4. Small Tag in HTML

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
HTML Tutorial
  • Tags
    • Types of Tags in HTML
    • Basic HTML Tags
    • HTML Format Tags
    • HTML object Tag
    • HTML Image Tags
    • HTML Table Tags
    • Meta Tag in HTML
    • Caption Tag in HTML
    • Aside Tag in HTML
    • Style Tag in HTML
    • Cite Tag in HTML
    • HTML Legend Tag
    • Quotation Tag in HTML
    • Datalist in HTML
    • map Tag in HTML
    • HTML Marquee Tag
    • Footer Tag in HTML
    • HTML nav Tag
    • HTML figure Tag
    • Option Tag in HTML
    • Inline Tags in HTML
    • Pre Tag in HTML
    • Span Tag in HTML
    • HTML samp Tag
    • SUP Tag in HTML
    • Div Tag in HTML
    • HTML tr Tag
    • HTML abbr Tag
    • HTML Address Tag
    • Small Tag in HTML
    • PHP Tag in HTML
    • Canvas Tag in HTML
    • Font Tag in HTML
    • Select Tag in HTML
    • HTML Picture Tag
    • Fieldset Tag in HTML
    • HTML Code Tag
    • kbd Tag in HTML
    • TextArea Tag in HTML
    • HTML Article Tag
    • HTML Button Tag
    • HTML time Tag
    • THead Tag in HTML
    • HTML frameset Tag
    • HTML checkbox Tag
    • Address Tag in HTML
    • Area Tag in HTML
    • HTML Strike Tag
    • HTML section Tag
    • HTML Umlaute
    • Frame Tag in HTML
    • tfoot in HTML
    • Embed Tag in HTML
    • href tag in HTML
    • Alt Tag in HTML
    • HTML Audio Tag
  • Basic
    • Introduction to HTML
    • What is HTML
    • HTML stands for
    • Advantages of HTML
    • Applications of HTML
    • Career In HTML
    • How HTML Works
    • Versions of Html
    • Symbols in HTML
    • HTML Commands
    • HTML Events
    • HTML Fonts Styles
    • HTML Form Controls
    • HTML Form Elements
    • HTML Frames
    • HTML Layout
    • HTML Entities
    • HTML List Styles
    • HTML Style Sheets
    • HTML Text Formatting Tags
    • What is XHTML?
    • HTML Section vs Div
    • DHTML
    • Cheat Sheet HTML
  • Attributes
    • HTML Attributes
    • HTML Event Attributes
    • HTML Style Attribute
    • HTML Text Attributes
    • HTML Block Elements
    • HTML Inline-Block
    • Block Level Elements in HTML
    • HTML Form Attribute
    • HTML Padding vs Margin
  • Color
    • HTML Colors 
    • RGB Color Model
    • Color Name in HTML
    • HTML Color Picker
    • Scrollbar Color
  • HTML5
    • What is HTML5
    • HTML5 Elements
    • Html5 New Elements
    • HTML5 Tags
    • HTML5 Semantics
    • HTML5 Web Workers
    • HTML5 Semantic Elements
  • Advance
    • Create Tables in HTML
    • Drag and Drop in HTML
    • Dropdown List in HTML
    • HTML Align Center
    • HTML Display Block
    • HTML Blocks
    • HTML Canvas
    • HTML SVG
    • HTML Text Editors
    • HTML Text Link
    • HTML Text Decoration
    • HTML URL Encoding
    • Iframes in HTML
    • HTML Tooltip
    • HTML Reset Button
    • HTML Hide Element
    • Image Link in HTML
    • Web Templates HTML
    • HTML Ordered List
    • HTML Unordered List
    • HTML Description List
    • HTML Form Validation
    • HTML Form Action
    • Registration Form in HTML
    • HTML Justify Text
    • Date in HTML
    • Vertical Table HTML
    • DOCTYPE HTML
    • Moving Text in HTML
    • Scrollbar in HTML Table
    • Responsive in HTML
    • HTML Inline-Style
    • HTML Progress Bar
    • HTML Colspan
    • HTML Favicon
    • HTML margin-left
    • Combobox in HTML
    • HTML Table Background
    • Table Without Border in HTML
    • Nested Table in HTML
    • Table Border in HTML
    • HTML onclick Button
    • HTML Image Padding
    • HTML Padding
    • HTML Border Style
    • HTML Float Left
    • File Path in HTML
    • HTML Geolocation
    • Linking Pages in HTML
    • Embed PHP in HTML
    • How to Add CSS in HTML?
    • Design Web Page in HTML
    • HTML Schriftart
    • Cursor in HTML
    • Scrollbar in HTML
    • HTML Sonderzeichen
    • HTML Search Bar
  • Interview Questions
    • HTML interview Questions
    • HTML5 Interview Questions And Answers

Related Courses

Online HTML Course

Bootstrap Training Course

XML Training Course

CSS Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - Online HTML Course Learn More