Business Information

The section "Business Information" continues to publish information about latest hard/soft-ware developments in computer graphics and geometry applications.
V.Pilyugin

HTML5 canvas element

The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years has enabled it to be used to describe a number of other types of documents.

HTML 5 is planned to be the fifth major revision of HTML. The ideas behind HTML 5 were pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG) and it was adopted as the starting point of the work of the new HTML working group of the W3C in 2007. The HTML working group has published the First Public Working Draft of the specification on 22nd January 2008 and this specification is ongoing work that is expected to remain so for many years.

HTML 5 introduces new elements to HTML for the first time since the last millennium that can dramatically enhance presentation of graphic content in the internet. One of these elements is a canvas element. This element in HTML5 is reserved for dynamic scriptable rendering of bitmap images. It was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers (notably Mozilla and Firefox) and Opera, and standardized by the WHATWG on new proposed specifications for next generation web technologies. Novell manufactures an XForms processor plugin for Internet Explorer, which also provides support for the canvas element. Independent efforts to support the canvas feature on Internet Explorer do not require plugins and are based solely on VML and JavaScript. Google has also begun a project to add canvas abilities to Internet Explorer using the same techniques.

Canvas consists of a drawable region defined in HTML code. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition. Here are examples of applications created with usage of canvas element:

• PlotKit - Javascript Chart Plotting - http://www.liquidx.net/plotkit/
• CanvasPaint - clone MS Paint - http://canvaspaint.org/
• Canvex - Sooter game - http://canvex.lazyilluminati.com/

These applications are believed to work in following browsers that support canvas element:

• Firefox 1.5
• Opera 9
• Safari 3

Here is an example of how canvas element can be used with a static image of dynamically rendered content.

<canvas id="canv1" width="150" height="150">

  <img src="images/canv1.png" width="150" height="150" alt=""/>

The canvas element has two attributes to control the size of the coordinate space:

• width
• height.

These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

The size of the coordinate space does not necessarily represent the size of the actual bitmap that the user agent will use internally or during rendering. On high-definition displays, for instance, the user agent may internally use a bitmap with two device pixels per unit in the coordinate space, so that the rendering remains at high quality throughout.

Here are some aspects or using the canvas element:

• The canvas element should not be used in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as XBL.
• When authors use the canvas element, they should also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.
• In interactive visual media with scripting enabled, the canvas element is an embedded element with a dynamically created image.
• In non-interactive, static, visual media, if the canvas element has been previously painted on (e.g. if the page was viewed in an interactive visual medium and is now being printed, or if some script that ran during the page layout process painted on the element), then the canvas element must be treated as embedded content with the current image and size. Otherwise, the element's fallback content must be used instead.
• In non-visual media, and in visual media with scripting disabled, the canvas element's fallback content must be used instead.
• Whenever the width and height attributes are set (whether to a new value or to the previous value), the bitmap and any associated contexts must be cleared back to their initial state and reinitialised with the newly specified coordinate space dimensions.

In the upcoming Mozilla Firefox 3 web browser, Mozilla puts making a 3d API for canvas on its desirable list of features. Many canvas developers have been waiting for a 3d API. A few developers have used canvas along with other programs and objects such as Alias Wavefront Object files to create a 3d area using canvas' pre-existing 2d API. Using the 2d API, developers are able to model out different 3d objects and show certain points of view, giving the impression of a 3d interactive view. There are canvas reference page in Apple Developers Connection and canvas introductory page on Mozilla Developer center that can be useful for canvas developers.

Publication is based on the contents of w3.org and wikipedia websites

Prepared by editor E. Malikova (Russia).