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




canvas tag in html

Learn html - html tutorial - canvas tag in html - html examples - html programs

  • <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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×