Misplaced Pages

Canvas element: Difference between revisions

Article snapshot taken from Wikipedia with creative commons attribution-sharealike license. Give it a read and then ask your questions in the chat. We can research this topic together.
Browse history interactively← Previous editNext edit →Content deleted Content addedVisualWikitext
Revision as of 07:05, 5 March 2010 editHelloAnnyong (talk | contribs)Administrators42,958 edits Reverted edits by MoreNet to version 347859997 by HelloAnnyong (left a note on user's talk page why this is inappropriate)← Previous edit Revision as of 07:08, 5 March 2010 edit undoMoreNet (talk | contribs)612 edits This is not advertisement. And also if my English is bad, please fix it. Undid revision 347863639 by HelloAnnyong (talk)Next edit →
Line 1: Line 1:
{{HTML}} {{HTML}}
The '''canvas''' ] is part of ] and allows for dynamic ] ] of ] images. The '''canvas''' ] is part of ] and allows for dynamic ] ] of 2D ] images. For 3D graphics, there is ]. Natively supported by ], ], ], and ]. See also support for legacy browsers.


==History==
It was initially introduced by ] for use inside their own ] ] component, powering applications like ] widgets and the ] browser. Later, it was adopted by ] browsers and ]<ref></ref> and standardized by the ] on new proposed specifications for next generation web technologies. ] manufactures an XForms processor plugin for ], which also provides support for the canvas element.<ref></ref> Independent efforts exist to support the canvas feature on Internet Explorer that do not require plugins and are based solely on ] and ].<ref></ref><ref></ref> It was initially introduced by ] for use inside their own ] ] component, powering applications like ] widgets and the ] browser. Later, it was adopted by ] browsers and ]<ref></ref> and standardized by the ] 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.

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


Line 29: Line 33:
===Intellectual property over canvas=== ===Intellectual property over canvas===
On March 14, 2007, WebKit developer ] forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman<ref></nowiki> Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007]</ref>, which stated that Apple reserved all ] rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” <ref></ref>, 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 ]'s lack of a policy on patents in comparison to the ]'s explicit favoring of royalty-free licenses. Apple later disclosed the patents under the W3C's royalty-free patent licensing terms.<ref></ref> 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.<ref> </ref> On March 14, 2007, WebKit developer ] forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman<ref></nowiki> Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007]</ref>, which stated that Apple reserved all ] rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” <ref></ref>, 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 ]'s lack of a policy on patents in comparison to the ]'s explicit favoring of royalty-free licenses. Apple later disclosed the patents under the W3C's royalty-free patent licensing terms.<ref></ref> 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.<ref> </ref>

==Support for legacy browsers==
] 8 and other old browsers do not support canvas element. There are many libraries that enable these legacy browsers to use canvas element.

<!-- Alphabet order -->
* - VML
* - ]
* - ] manufactures an XForms processor plugin for ], which also provides support for the canvas element.
* - Adobe Flash (from Ver. 2), ], and ]


==See also== ==See also==

Revision as of 07:08, 5 March 2010

HTML
Comparisons

The canvas element is part of HTML5 and allows for dynamic scriptable rendering of 2D bitmap images. For 3D graphics, there is WebGL. Natively supported by Mozilla Firefox, Google Chrome, Safari, and Opera. See also support for legacy browsers.

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 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.

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.

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.

Reactions

At the time of its introduction the canvas element 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.

Intellectual property over canvas

On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman, 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” , 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. 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.

Support for legacy browsers

Internet explorer 8 and other old browsers do not support canvas element. There are many libraries that enable these legacy browsers to use canvas element.

See also

References

  1. Opera 9.0 changelog
  2. Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  3. 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

External links

Category: