What is HTML5 Canvas?

The HTML 5 canvas is a two-dimensional rectangular grid with the top left corner being the point with coordinates (0,0). If we label by x and y the horizontal and the vertical coordinates, the as we go from left to right the horizontal coordinate x increases from 0 to the width of the canvas. As we move from top to bottom the vertical coordinate y increases from 0 to the height of the canvas. In the example shown below, the canvas has a width of 400 pixels and a height of 400 pixels. Some of the points on the grid have their coordinates (x,y) in pixels.

.

The canvas element is an HTML 5 element used within the body of an HTML 5 file in order to create a canvas as follows:

<canvas id="myFirstCanvas" width="400" height="400" style="border:4px solid #0000ff;">
This browser does not support the HTML5 canvas tag. </canvas>

The <canvas> element in HTML 5 is used to draw a rectangle (container) on which texts, lines, rectangles, circles, polygons, arcs and even graphs of algebraic functions may be drawn using a scripting language such as JavaScript. Images may also be added to a canvas and processed using powerful methods and functions.

Animation may be useful in games, interactive applications, simulations, ...With JavaSCript may be used to add animated elements in an HTML 5 canvas.

More Free HTML5 Canvas Tutorials