English 中文(简体)
HTML5 Tutorial

HTML5 Demo

HTML5 Tools

HTML5 Useful References

HTML5 Tag Reference

HTML5 Resources

Selected Reading

HTML5 - Canvas
  • 时间：2024-12-22

HTML5 - Canvas

Previous Page Next Page  

HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes pke id, name and class, etc.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

You can easily find that <canvas> element in the DOM using getElementById() method as follows −

var canvas = document.getElementById("mycanvas");

Let us see a simple example on using <canvas> element in HTML5 document.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px sopd red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

This will produce the following result −