What Is The Tag In HTML?

ExploreEXPLORE THE CATALOGSupercharge your career with 700+ hands-on coursesView All CoursesPythonJavaJavaScriptCReactDockerVue JSRWeb DevDevOpsAWSC#LEARNING TOOLSExplore the industry's most complete learning platformCoursesLevel up your skillsSkill PathsAchieve learning goalsProjectsBuild real-world applicationsAssessmentsBenchmark your skillsPersonalized PathsGet the right resources for your goalsLEARN TO CODECheck out our beginner friendly courses.PricingFor BusinessResourcesBlogFor developers, By developersCheatsheetsDownload handy guides for tech topicsWebinarsSessions with our global developer communityAnswersTrusted answers to developer questionsSearchCoursesLog InJoin for freeWhat is the <canvas> tag in HTML?

The HTML 5 <canvas> tag is an HTML element that creates a blank drawing area where graphics can be rendered on web pages. The <canvas> element supports both 2D and 3D graphics. This depends on the context it is used. It supports 2D graphics through the 2D context and 3D graphics through the WebGLWeb Graphics Library context.

The <canvas> element isn’t restricted to still graphics. It also supports animations. This means it can be used to build games, interactive web applications, visualize data, manipulate photos and perform real-time video processing.

The <canvas> element is used extensively for graphics on the web. Web applications like Figma, Draw.io, and Canva also use the <canvas> element.

Code

To create a new canvas, add a <canvas> element to an HTML document. This creates a 300x150 px blank canvas.

OutputHTMLRun

To see the canvas in action, use the JavaScript canvas API to draw an orange rectangle.

OutputJavaScriptHTMLRunRepresentation of drawn rectangle on canvas

Relevant Answers

Explore Courses

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

TRENDING TOPICS

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

Blind 75

Pricing

For Individuals

Try for Free

Gift a Subscription

CONTRIBUTE

Become an Author

Become an Affiliate

Earn Referral Credits

RESOURCES

Blog

Cheatsheets

Webinars

Answers

ABOUT US

Our Team

Careers

Hiring

Frequently Asked Questions

Contact Us

Press

LEGAL

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

INTERVIEW PREP COURSES

Grokking the Modern System Design Interview

Grokking the Product Architecture Design Interview

Grokking the Coding Interview Patterns

Machine Learning System Design

Tiktok Streamline Icon: https://streamlinehq.com

Copyright ©2024 Educative, Inc. All rights reserved.