html tutorial - Canvas <canvas> tag in HTML - html5 - html code - html form

  • <canvas> element is used to draw the graphics by using script.
  • <canvas> tag is only container for the graphics we have use the Script to draw the graphics.
  • <canvas> tag supports Global and event attributes.
  • <canvas> tag belongs to Flow content, Phrasing content, Embedded content and Palpable Content category.

Syntax for <canvas> tag:

<canvas>Content here...</canvas>

Differences between HTML 4.01 and HTML5 for <canvas> tag:

HTML 4.01

  • HTML4 does not support <canvas> tag.


  • <canvas> tag new in HTML5.

Sample Coding for <canvas> tag:

Tryit<!DOCTYPE html>
<html >
        <title>Wikitechy canvas tag</title>
        <h3>WIKITECHY CANVAS</h3>
        <canvas id="wikitechy"></canvas>
            var a=document.getElementById('mytechCanvas');
            var ctx=c.getContext('2d');

Code Explanation for <canvas> tag:

code explanation for canvas tag

  1. <canvas>tag is given for graphics by using script in HTML page.
  2. “var a” declared as an object for the id “mytechcanvas” the <canvas>tag.

Output of <canvas> tag:

output for canvas tag

  1. The output shows the 2d image of the rectangle by using canvas tag.


Attribute Value HTML4 HTML5 Description
disabled disabled Yes Yes To disable the option-group
label text Yes Yes To define the label the option-group.

Browser Support for <canvas> tag:

Yes Yes Yes Yes Yes

Related Searches to canvas tag in html