HTML <canvas> Tag How To


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <canvas> Tag in HTML 5

The canvas element creates a two-dimensional drawing surface which can be used to draw images using 2-D drawing functions. It can be used to create images dynamically, which allows developers to:

  • create charts and graphs online
  • display graphics in online games
  • display text as an image with various image effects such as drop shadow
  • generate images on the fly

As a good example of the <canvas> tag, the site logo in the upper left corner of this page is text drawn on a canvas, not an image displayed with the <img> tag. Here is another example of the <canvas> tag.