Canvas

The HTML   element can be used to draw graphics via scripting (usually JavaScript). It can be used to draw graphs, make photo compositions or even perform animations.

Mozilla applications gained support  starting with Gecko 1.8 (Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer, prior to version 9.0 beta, does not support, but a page can effectively add support for it by including a script from Google's Explorer Canvas project. Opera 9 also supports. It is currently the only way to draw graphics in vanilla javascript.

Attributes

 * - The width of the coordinate space in CSS pixels. Default is 300.
 * - The height of the coordinate space in CSS pixels. Default is 150.
 * See Global HTML Attributes for more.

HTML example:

 function draw { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }   }   This example requires a browser that supports the HTML5 feature.

That produces:

in Firefox 3.6.10.

Rendering
The canvas is used as an area to draw on, but by itself does not have a visual appearance.