Canvas element

From Wikipedia, the free encyclopedia

  (Redirected from Canvas (HTML element))
Jump to: navigation, search
HTML
HTML.svg
This box: view • talk • edit

The canvas element is part of HTML5 and allows for dynamic scriptable rendering of 2D bitmap images.

Contents

[edit] History

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 and Opera[1] and standardized by the WHATWG on new proposed specifications for next generation web technologies.

Around summer in 2009, text API and pixel manipulation is added and implemented to web browsers.

[edit] Usage

Canvas consists of a drawable region defined in HTML code with height and width attributes. 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.

[edit] Example

The following code creates a Canvas element in an HTML page:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Using JavaScript, you can draw on the canvas:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

This code draws a red rectangle on the screen.

[edit] Reactions

At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. Further arguments are concerning the logic upon which canvas was conceived: being completely procedural and not having a descriptive counterpart allowed canvas to 'paint', but drawn elements are not identifiable in a DOM-like way. There are other concerns about syntax e.g. the absence of a namespace.[2]

[edit] Intellectual property over canvas

On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman[3], which stated that Apple reserved all intellectual property rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” [4], but left the door open to licensing the patents should the specification be transferred to a standards body with a formal patent policy. This caused considerable discussion among web developers, and raised questions concerning the WHATWG's lack of a policy on patents in comparison to the W3C's explicit favoring of royalty-free licenses. Apple later disclosed the patents under the W3C's royalty-free patent licensing terms.[5] The disclosure means that Apple is required to provide royalty-free licensing for the patent whenever the Canvas element becomes part of a future W3C recommendation created by the HTML working group.[6]

[edit] Support

The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively supported by any versions of Internet Explorer, but can receive support through external libraries.

[edit] See also

[edit] References

  1. ^ Opera 9.0 changelog
  2. ^ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  3. ^ [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007
  4. ^ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
  5. ^ HTML Working Group Patent Policy Status – Known Disclosures
  6. ^ W3C patent policy in use by HTML working group

[edit] External links

Retrieved from "http://en.wikipedia.org/wiki/Canvas_element"