The html5 tutorials

 
About HTML5
Home
Introduction to HTML5
Features of HTML5
Older versions Vs. HTML5
 
Tags  
source
article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
ruby
section
summary
time
video
wbr
 

The <canvas> Tag

The canvas tag is used to draw graphics on a rectangular area inside a web page by using JavaScript. The canvas tag can be used to draw graphs, generate photo compositions and dynamic content like animations, games etc.

One can also write a fallback content (as you may have read in audio tag) between the start and end tags to show legacy browser that they do not support this element.

Using this feature, one can control each and every pixel that is part of it. The element reduces the need to download images or graphics from a server.

Example code:

<html>
  <body>
    <canvas id="demoCanvas" width="380" height="180"></canvas>
      <script type="text/javascript">
         var can = document.getElementById("demoCanvas"),
         context = can.getContext("2d");
         context.fillStyle = 'blue';
         context.fillRect(10, 20, 200, 100);
      </script>
  </body>
</html>

Attributes of Canvas tag:

There are two attributes associated with canvas tag for setting up the vertical and horizontal space that has to be occupied on the page

Attribute Values Description of the attribute
height pixels Defines the height of the canvas on the page in pixels
width pixels Defines the width of the canvas in the page in pixels