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.

HTML5

  • <canvas> tag new in HTML5.

Sample Coding for <canvas> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy canvas tag</title>
    </head>
    <body>
        <h3>WIKITECHY CANVAS</h3>
        <canvas id="wikitechy"></canvas>
        <script>
            var a=document.getElementById('mytechCanvas');
            var ctx=c.getContext('2d');
            ctx.fillStyle='purple';
            ctx.fillRect(0,0,100,200);
        </script>
    </body>
</html>

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:

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