Canvas Tag In HTML – <canvas>

We will talk about Html canvas Tag in this post. Hoping that it will satisfy the requirements for learning.

The HTML <canvas> tag is used to create a drawing area on a web page using JavaScript. The <canvas> tag is a container for graphics, and it allows developers to create and manipulate graphics using a variety of JavaScript tools and libraries.

Create a rectangle in red on the fly, and place it within the <canvas> tag:


<!DOCTYPE html> <html><body> <canvas id="mrxCanvas"> Canvas is not supported by your browser. </canvas> <script> var canvas = document.getElementById("mrxCanvas"); var mrxample = canvas.getContext("2d"); mrxample.fillStyle = "#FF0000"; mrxample.fillRect(0, 0, 80, 80); </script> </body></html>

Another <canvas> example:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 50, 50);ctx.fillStyle = 'red'; ctx.fillRect(70, 70, 50, 50); </script> </body> </html>

Uses and Definition

Canvas tag <canvas> allows you to draw graphics on the fly with scripting (mostly JavaScript).

You’ll have to use a script to draw your graphics, however. The canvas tag is transparent and is only a container for graphics.

Browsers without JavaScript and browsers that do not support <canvas> will display any text within it.

Notes and Tips

Advice: Find out more about <canvas> by visiting our HTML Canvas Tutorial.

Advice: You can find a complete list of all HTML Canvas properties and methods in our HTML Canvas Reference.

Browser Compatibility

The table indicates which browser version was the first to include full support for the element.



heightpixelsSet the height of the canvas. 150 is the default value.
widthpixelsDetermines the width of the canvas default value is 300.

Global Attributes

HTML’s global attributes work with the <canvas> tag as well.

Event Attributes

In HTML, the Event Attributes can also be used with the <canvas> Tag.

CSS Settings By Default

Typically, the following values are used by browsers for displaying the <canvas> element:


<!DOCTYPE html> <html> <body> <style> canvas { height: 200px; width: 450px; border:" 2px solid black "; } </style> <canvas></canvas> </body> </html>

Using JavaScript, you can draw on canvas. Mobile and browser compatibility makes it particularly interesting.

Despite being around for a long time, the canvas tag has only recently started to get more attention from developers. In browsers, we can now draw 3D graphics without using any plugins thanks to the WebGL standard.

Digital artwork can be created using a new tool that Google has introduced. A small white square sits in the center of the canvas tool called “Canvas“.

Advantages of using <canvas> tag

Here are some of the main advantages:

  • The <canvas> tag allows developers to create dynamic graphics that can be updated and changed in real time. This is especially useful for creating interactive graphics or visualizations that respond to user input.
  • Because the <canvas> tag is rendered using JavaScript, it can be highly optimized for performance. This makes it ideal for creating graphics that need to be rendered quickly and efficiently, such as animations or real-time visualizations.
  • The <canvas> tag is supported by all major web browsers, including Chrome, Firefox, Safari, and Internet Explorer. This means that you can create graphics that will work on a wide range of platforms and devices.
  • The <canvas> tag is highly flexible, allowing developers to create a wide range of graphics and visualizations using a variety of tools and libraries. This includes everything from simple shapes and lines to complex animations and interactive visualizations.
  • With the proper techniques and tools, developers can ensure that graphics created with the <canvas> tag are accessible to users with disabilities, such as those who use screen readers.
Do subscribe to our Newsletter below, in order to be in touch with the latest technical information on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *