HTML5 Canvas Element



What Is Canvas

The canvas element was originally developed by Apple for use in Mac OS X and Safari, but was later adopted by Mozilla and Opera their Web browsers.It is considered as one of the most vital feature of HTML5as it allows to draw graphics on a webpage with the help of Java script.

Along with a series of 2D drawing APIs it can be used to create shapes, text, transitions, and animations inside the element. It also facilitates the production of graphs, interactive games, paint applications, and other graphics without requiring external plug-ins such as Adobe Flash.

How To Add Canvas

The canvas feature can be simply added by the following code.The id,width, height attributes have to be specified. Javascript is needed to put shapes,sizes and colors on the canvas. The canvas 2D context is a grid, with the top-left corner as the default origin. When you create a shape, you specify the starting X and Y coordinates and the width and height.

On the left we have the code and on the right we have the result

Adding Canvas.

Use Of Canvas

The APIs allow the canvas to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas.
Related HTML5 topics:

  • HTML5 Web Storage

  • HTML5 Introduction