Raphaël, named for Italian painter Raffaello Sanzio da Urbino, is a cross-browser

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

library that draws

Vector graphics Vector graphics are a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector displ ...

for web sites. It will use SVG for most browsers, but will use VML for older versions of

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated as IE or MSIE) is a deprecation, retired series of graphical user interface, graphical web browsers developed by Microsoft that were u ...

. Raphaël currently supports Chrome 5.0+

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curr ...

3.0+,

Safari A safari (; originally ) is an overland journey to observe wildlife, wild animals, especially in East Africa. The so-called big five game, "Big Five" game animals of Africa – lion, African leopard, leopard, rhinoceros, African elephant, elep ...

3.0+,

Opera Opera is a form of History of theatre#European theatre, Western theatre in which music is a fundamental component and dramatic roles are taken by Singing, singers. Such a "work" (the literal translation of the Italian word "opera") is typically ...

9.5+ and

6.0+.

Use

Raphaël is used by first creating an instance of the Raphaël

object Object may refer to: General meanings * Object (philosophy), a thing, being, or concept ** Object (abstract), an object which does not exist at any particular time or place ** Physical object, an identifiable collection of matter * Goal, an a ...

, which manages the creation of the canvas. The following examples create a canvas that is 320 pixels wide and 200 pixels high: // top left of canvas at the viewport's 10,50 coordinate var r = Raphael(10, 50, 320, 200); // top left of canvas at the top left corner of the #example element (in elements where dir="ltr") var r = Raphael(document.getElementById("example"), 320, 200); // same as above var r = Raphael("example", 320, 200); Once the Raphaël object has been instantiated, its various drawing, resizing and animation methods may be called to build up a vector graphic. This library includes support of Cùfon fonts, a format that turns a given font into a set of vector paths. It is extensible through plugins.

Usage

The widget is used on the

Washington Post ''The Washington Post'', locally known as ''The'' ''Post'' and, informally, ''WaPo'' or ''WP'', is an American daily newspaper published in Washington, D.C., the national capital. It is the most widely circulated newspaper in the Washington m ...

and the

Times Online ''The Times'' is a British daily national newspaper based in London. It began in 1785 under the title ''The Daily Universal Register'', adopting its modern name on 1 January 1788. ''The Times'' and its sister paper ''The Sunday Times'' (fo ...

websites. Raphaël is also used by

iCloud iCloud is the personal cloud service of Apple Inc. Launched on October 12, 2011, iCloud enables users to store and Data synchronization, sync data across devices, including Apple Mail, Calendar (Apple), Apple Calendar, Photos (Apple), Apple Ph ...

.com, and by Mass Relevance in the

White House The White House is the official residence and workplace of the president of the United States. Located at 1600 Pennsylvania Avenue Northwest (Washington, D.C.), NW in Washington, D.C., it has served as the residence of every U.S. president ...

.Raphaël in White House: “we (@massrelevance) used @raphaeljs 2.0 for the map viz used during the #AskObama event today http://t.co/EcqROIi”
/ref>

Use

Usage

See also

References

Further reading

External links