Raphal Reference

http://raphaeljs.com/reference.html

RaphalReference
Animation
Animation.delay(delay)
Createsacopyofexistinganimationobjectwithgivendelay.

Parameters
delay
number

numberofmstopassbetweenanimationstart andactualanimation newalteredAnimationobject

Returns:

object

var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); circle1.animate(anim); // run the given animation immediately circle2.animate(anim.delay(500)); // run the given animation after 500 ms

Animation.repeat(repeat)
Createsacopyofexistinganimationobjectwithgivenrepetition.

Parameters
repeat
number

numberiterationsofanimation.Forinfinite animationpassInfinity newalteredAnimationobject

Returns:

object

Element
1 of 49 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Element.animate()
Createsandstartsanimationforgivenelement.

Parameters
params ms easing callback or animation Returns:
object object object number string

finalattributesfortheelement,seealso numberofmillisecondsforanimationtorun easingtype.AcceptoneoforCSSformat: cubicbezier(XX, XX, XX, XX) callbackfunction.Willbecalledattheendof animation.

function

animationobject,see originalelement

Element.animateWith()
Actssimilarto,butensurethatgivenanimationrunsinsyncwithanothergiven element.

Parameters
element anim params ms easing callback or element anim animation Returns:
object object object object object object object number string

elementtosyncwith animationtosyncwith finalattributesfortheelement,seealso numberofmillisecondsforanimationtorun easingtype.AcceptonoforCSSformat: cubicbezier(XX, XX, XX, XX) callbackfunction.Willbecalledattheendof animation.

function

elementtosyncwith animationtosyncwith animationobject,see originalelement

2 of 49

Element.attr()

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Setstheattributesoftheelement.

Parameters
attrName value or params or attrName or attrNames
array string object string string

attributesname value

objectofname/valuepairs

attributesname

inthiscasemethodreturnsarrayofcurrent valuesforgivenattributenames ifattrsName&valueorparamsarepassedin. valueoftheattributeifonlyattrsNameis

Returns: Returns: passedin. Returns: passedin. Returns:

object ...

array

arrayofvaluesoftheattributeifattrsNamesis

object

objectofattributesifnothingispassedin.

Possibleparameters
PleaserefertotheSVGspecificationforanexplanationoftheseparameters. arrow-end arrowheadontheendofthepath.Theformatforstringis <type>[-<width>[-<length>]].Possibletypes: classic,block,open,oval,diamond,none,width: wide,narrow,midium,length:long,short,midium. string clip-rect commaorspaceseparatedvalues:x,y,widthandheight string cursor CSStypeofthecursor number cx number cy string fill colour,gradientorimage number fill-opacity string font string font-family number font-size fontsizeinpixels string font-weight number height 10/15/2011 12:33 PM string href URL,ifspecifiedelementbehavesashyperlink opacity
string

3 of 49

Raphal Reference

http://raphaeljs.com/reference.html

number

string path number r number rx number ry string src string stroke stroke-dasharray

SVGpathstringformat imageURL,onlyworksforelement strokecolour string [,-,.,-.,-..,. ,- ,--,- .,--., --..] string stroke-linecap [butt,square,round] string stroke-linejoin [bevel,round,miter] number stroke-miterlimit number stroke-opacity number stroke-width strokewidthinpixels,defaultis'1' string target usedwithhref string text contentsofthetextelement.Use\nformultilinetext string text-anchor [start,middle,end],defaultismiddle string title willcreatetooltipwithagiventext string transform see number width number x number y

Gradients
Lineargradientformat:angle-colour[-colour[:offset]]*colour,example:90-#fff-#00090gradientfromwhitetoblackor 0-#fff-#f00:20-#0000gradientfromwhiteviared(at20%)toblack. radialgradient:r[(fx, fy)]colour[-colour[:offset]]*colour,example:r#fff-#000gradientfromwhitetoblackorr(0.25, 0.75)#fff-#000gradientfromwhitetoblackwithfocuspointat0.25,0.75. Focuspointcoordinatesarein0..1range.Radialgradientscanonlybeappliedto circlesandellipses.

PathString
PleaserefertoSVGdocumentationregardingpathstring.Raphalfullysupportsit.

ColourParsing
Colourname(red,green,cornflowerblue,etc) #shortenedHTMLcolour:(#000,#fc0,etc) #fulllengthHTMLcolour:(#000000,#bd2300) rgb(,,)red,greenandbluechannelsvalues:

4 of 49

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

(rgb(200, 100, 0)) rgb(%,%,%)sameasabove,butin%:(rgb(100%, 175%, 0%)) rgba(,,,)red,greenandbluechannelsvalues: (rgba(200, 100, 0, .5)) rgba(%,%,%,%)sameasabove,butin%: (rgba(100%, 175%, 0%, 50%)) hsb(,,)hue,saturationandbrightnessvalues: (hsb(0.5, 0.25, 1)) hsb(%,%,%)sameasabove,butin% hsba(,,,)sameasabove,butwithopacity hsl(,,)almostthesameashsb,seeWikipediapage hsl(%,%,%)sameasabove,butin% hsla(,,,)sameasabove,butwithopacity Optionallyforhsbandhslyoucouldspecifyhueasadegree: hsl(240deg, 1, .5)or,ifyouwanttogofancy,hsl(240, 1, .5)

Element.click(handler)
Addseventhandlerforclickfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.clone()
Returns:
object

cloneofagivenelement

Element.data(key,[value])
Addsorretrievesgivenvalueasociatedwithgivenkey.Seealso

Parameters
key value Returns: Returns:
5 of 49
string any object any

keytostoredata valuetostore or,ifvalueisnotspecified: value

10/15/2011 12:33 PM

Usage

Raphal Reference

http://raphaeljs.com/reference.html

for (var i = 0, i < 5, i++) { paper.circle(10 + 15 * i, 10, 10) .attr({fill: "#000"}) .data("i", i) .click(function () { alert(this.data("i")); }); }

Element.dblclick(handler)
Addseventhandlerfordoubleclickfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.drag(onmove,onstart,onend, [mcontext],[scontext],[econtext])
Addseventhandlersfordragoftheelement.

Parameters
onmove onstart onend mcontext scontext econtext
function function function object object object

handlerformoving handlerfordragstart handlerfordragend contextformovinghandler contextfordragstarthandler contextfordragendhandler

Additionalyfollowingdrageventswillbetriggered:drag.start.<id>onstart, drag.end.<id>onendanddrag.move.<id>oneverymove.Whenelementwill bedraggedoveranotherelementdrag.over.<id>willbefiredaswell. Starteventandstarthandlerwillbecalledinspecifiedcontextorincontextofthe elementwithfollowingparameters: x y event

number number object

6 of 49

xpositionofthemouse ypositionofthemouse DOMeventobject

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Moveeventandmovehandlerwillbecalledinspecifiedcontextorincontextofthe elementwithfollowingparameters: dx dy x y event

number number number number object

shiftbyxfromthestartpoint shiftbyyfromthestartpoint xpositionofthemouse ypositionofthemouse DOMeventobject

Endeventandendhandlerwillbecalledinspecifiedcontextorincontextofthe elementwithfollowingparameters: event Returns:

object

DOMeventobject
object

Element.getBBox(isWithoutTransform)
Returnboundingboxforagivenelement

Parameters
isWithoutTransform
boolean

flag,trueifyouwanttohaveboundingbox beforetransformations.Defaultisfalse. Boundingboxobject:

Returns: { x: y: width: height: }

number number number number

object

topleftcornerx topleftcornery width height

Element.getPointAtLength(length)
Returncoordinatesofthepointlocatedatthegivenlengthonthegivenpath.Only worksforelementofpathtype.

Parameters
length
7 of 49
number object

representationofthepoint:
10/15/2011 12:33 PM

Returns:

Raphal Reference

http://raphaeljs.com/reference.html

{ x: y: alpha: }
number number number

xcoordinate ycoordinate angleofderivative

Element.getSubpath(from,to)
Returnsubpathofagivenelementfromgivenlengthtogivenlength.Onlyworksfor elementofpathtype.

Parameters
from to Returns:
number number string

positionofthestartofthesegment positionoftheendofthesegment pathstringforthesegment

Element.getTotalLength()
Returnslengthofthepathinpixels.Onlyworksforelementofpathtype. Returns:
number

length.

Element.glow([glow])
Returnsetofelementsthatcreateglow-likeeffectaroundgivenelement.See. Note:Glowisnotconnectedtotheelement.Ifyouchangeelementattributesitwont adjustitself.

Parameters
glow { width fill opacity offsetx offsety color
number boolean number number number string object

parametersobjectwithallpropertiesoptional:

8 of 49

sizeoftheglow,defaultis10 willitbefilled,defaultisfalse opacity,defaultis0.5 horizontaloffset,defaultis0 verticaloffset,defaultis0 glowcolour,defaultisblack

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

} Returns:
object

ofelementsthatrepresentsglow

Element.hide()
Makeselementinvisible.See. Returns:
object

Element.hover(f_in,f_out,[icontext], [ocontext])
Addseventhandlersforhoverfortheelement.

Parameters
f_in f_out icontext ocontext Returns:
function function object object object

handlerforhoverin handlerforhoverout contextforhoverinhandler contextforhoverouthandler

Element.id
Uniqueidoftheelement.Especiallyusesfulwhenyouwanttolisten toeventsoftheelement,becausealleventsarefiredinformat <module>.<action>.<id>.Alsousefulformethod.
number

Element.insertAfter()
Insertscurrentobjectafterthegivenone. Returns:
object

Element.insertBefore()
Insertscurrentobjectbeforethegivenone. Returns:
9 of 49
object

Element.mousedown(handler)

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Addseventhandlerformousedownfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.mousemove(handler)
Addseventhandlerformousemovefortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.mouseout(handler)
Addseventhandlerformouseoutfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.mouseover(handler)
Addseventhandlerformouseoverfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.mouseup(handler)
Addseventhandlerformouseupfortheelement.

Parameters
handler Returns:
10 of 49
function object

handlerfortheevent

Element.next
object

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Referencetothenextelementinthehierarchy.

Element.node
object

GivesyouareferencetotheDOMobject,soyoucanassignevent handlersorjustmessaround.Note:Dontmesswithit.

Usage
// draw a circle at coordinate 10,10 with radius of 10 var c = paper.circle(10, 10, 10); c.node.onclick = function () { c.attr("fill", "red"); };

Element.onDragOver(f)
Shortcutforassigningeventhandlerfordrag.over.<id>event,whereidisidof theelement(see).

Parameters
f
function

handlerforevent,firstargumentwouldbethe elementyouaredraggingover

Element.paper
object

Internalreferencetopaperwhereobjectdrawn.Mainlyforusein pluginsandelementextensions.

Usage
Raphael.el.cross = function () { this.attr({fill: "red"}); this.paper.path("M10,10L50,50M50,10L10,50") .attr({stroke: "red"}); }

11 of 49

Element.pause([anim])

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Stopsanimationoftheelementwithabilitytoresumeitlateron.

Parameters
anim Returns:
object object

animationobject originalelement

Element.prev
object

Referencetothepreviouselementinthehierarchy.

Element.raphael
object

Internalreferencetoobject.Incaseitisnotavailable.

Usage
Raphael.el.red = function () { var hsb = this.paper.raphael.rgb2hsb(this.attr("fill")); hsb.h = 1; this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex}); }

Element.remove()
Removeselementformthepaper.

Element.removeData([key])
Removesvalueassociatedwithanelementbygivenkey.Ifkeyisnotprovided, removesallthedataoftheelement.

Parameters
key Returns:
string object

key

Element.resume([anim])
12 of 49

Resumesanimationifitwaspausedwithmethod.

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
anim Returns:
object object

animationobject originalelement

Element.rotate(deg,[cx],[cy])
Addsrotationbygivenanglearoundgivenpointtothelistoftransformationsofthe element.

Parameters
deg cx cy
number number number

angleindegrees xcoordinateofthecentreofrotation ycoordinateofthecentreofrotation

Ifcx&cyarentspecifiedcentreoftheshapeisusedasapointofrotation. Returns:
object

Element.scale(sx,sy,[cx],[cy])
Addsscalebygivenamountrelativetogivenpointtothelistoftransformationsofthe element.

Parameters
sx sy cx cy
number number number number

horisontalscaleamount verticalscaleamount xcoordinateofthecentreofscale ycoordinateofthecentreofscale

Ifcx&cyarentspecifiedcentreoftheshapeisusedinstead. Returns:
object

Element.setTime(anim,value)
Setsthestatusofanimationoftheelementinmilliseconds.Similartomethod.

Parameters
anim value
13 of 49
object number

animationobject numberofmillisecondsfromthebeginningof theanimation

10/15/2011 12:33 PM

Returns:

Raphal Reference

http://raphaeljs.com/reference.html

object

originalelementifvalueisspecified

Note,thatduringanimationfollowingeventsaretriggered: Oneachanimationframeeventanim.frame.<id>,onstartanim.start.<id>and onendanim.finish.<id>.

Element.show()
Makeselementvisible.See. Returns:
object

Element.status([anim],[value])
Getsorsetsthestatusofanimationoftheelement.

Parameters
anim value
object number

animationobject 01.Ifspecified,methodworkslikeasetter andsetsthestatusofagivenanimationtothe value.Thiswillcauseanimationtojumptothe givenposition. status

Returns: or Returns: informat: { anim: status: } or Returns:

object number

number

array

statusifanimisnotspecified.Arrayofobjects

animationobject status

object

originalelementifvalueisspecified

Element.stop([anim])
Stopsanimationoftheelement.
14 of 49

Parameters
anim

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

object

animationobject
object

Returns:

originalelement

Element.toBack()
Movestheelementsoitisthefurthestfromtheviewerseyes,behindother elements. Returns:
object

Element.toFront()
Movestheelementsoitistheclosesttotheviewerseyes,ontopofotherelements. Returns:
object

Element.touchcancel(handler)
Addseventhandlerfortouchcancelfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.touchend(handler)
Addseventhandlerfortouchendfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.touchmove(handler)
Addseventhandlerfortouchmovefortheelement.

Parameters
handler Returns:
15 of 49
function object

handlerfortheevent

Element.touchstart(handler)

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Addseventhandlerfortouchstartfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.transform([tstr])
Addstransformationtotheelementwhichisseparatetootherattributes,i.e. translationdoesntchangexoryoftherectange.Theformatoftransformationstring issimilartothepathstringsyntax: "t100,100r30,100,100s2,2,100,100r45s1.5" Eachletterisacommand.Therearefourcommands:tisfortranslate,risforrotate, sisforscaleandmisformatrix. Therearealsoalternativeabsolutetranslation,rotationandscale:T,RandS.They willnottakeprevioustransformationintoaccount.Forexample,...T100,0will alwaysmoveelement100pxhorisontally,while...t100,0couldmoveitvertically ifthereisr90before.Justcompareresultsofr90t100,0andr90T100,0. So,theexamplelineabovecouldbereadliketranslateby100,100;rotate30 around100,100;scaletwicearound100,100;rotate45aroundcentre;scale1.5 timesrelativetocentre.Asyoucanseerotateandscalecommandshaveorigin coordinatesasoptionalparameters,thedefaultisthecentrepointoftheelement. Matrixacceptssixparameters.

Usage
var el = paper.rect(10, 20, 300, 200); // translate 100, 100, rotate 45, translate -100, 0 el.transform("t100,100r45t-100,0"); // if you want you can append or prepend transformations el.transform("...t50,50"); el.transform("s2..."); // or even wrap el.transform("t50,50...t-50-50"); // to reset transformation call method with empty string el.transform(""); // to get current value call it without parameters console.log(el.transform());
16 of 49 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
tstr Iftstrisntspecified Returns: else Returns:
object string string

transformationstring

currenttransformationstring

Element.translate(dx,dy)
Addstranslationbygivenamounttothelistoftransformationsoftheelement.

Parameters
dx dy Returns:
number number object

horisontalshift verticalshift

Element.unclick(handler)
Removeseventhandlerforclickfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.undblclick(handler)
Removeseventhandlerfordoubleclickfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.undrag()
Removesalldrageventhandlersfromgivenelement.

17 of 49

Element.unhover(f_in,f_out)

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Removeseventhandlersforhoverfortheelement.

Parameters
f_in f_out Returns:
function function object

handlerforhoverin handlerforhoverout

Element.unmousedown(handler)
Removeseventhandlerformousedownfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.unmousemove(handler)
Removeseventhandlerformousemovefortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.unmouseout(handler)
Removeseventhandlerformouseoutfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.unmouseover(handler)
Removeseventhandlerformouseoverfortheelement.

Parameters
handler Returns:
18 of 49
function object

handlerfortheevent

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Element.unmouseup(handler)
Removeseventhandlerformouseupfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.untouchcancel(handler)
Removeseventhandlerfortouchcancelfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.untouchend(handler)
Removeseventhandlerfortouchendfortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.untouchmove(handler)
Removeseventhandlerfortouchmovefortheelement.

Parameters
handler Returns:
function object

handlerfortheevent

Element.untouchstart(handler)
Removeseventhandlerfortouchstartfortheelement.

Parameters
handler
19 of 49
function object

handlerfortheevent
10/15/2011 12:33 PM

Returns:

Raphal Reference

http://raphaeljs.com/reference.html

Matrix
Matrix.add(a,b,c,d,e,f,matrix)
Addsgivenmatrixtoexistingone.

Parameters
a b c d e f matrix
number number number number number number object

Matrix.clone()
Returnscopyofthematrix Returns:
object

Matrix.invert()
Returnsinvertedversionofthematrix Returns:
object

Matrix.rotate(a,x,y)
Rotatesthematrix

Parameters
a x y
number number number

Matrix.scale(x,[y],[cx],[cy])
Scalesthematrix
20 of 49 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
x y cx cy
number number number number

Matrix.split()
Splitsmatrixintoprimitivetransformations Returns: dx dy scalex scaley shear rotate isSimple
number number number number number number boolean object

informat:

translationbyx translationbyy scalebyx scalebyy shear rotationindeg coulditberepresentedviasimpletransformations

Matrix.toTransformString()
Returntransformstringthatrepresentsgivenmatrix Returns:
string

transformstring

Matrix.translate(x,y)
Translatethematrix

Parameters
x y
number number

Matrix.x(x,y)
21 of 49

Returnxcoordinateforgivenpointaftertransformationdescribedbythematrix.See also 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
x y Returns:
number number number

Matrix.y(x,y)
Returnycoordinateforgivenpointaftertransformationdescribedbythematrix.See also

Parameters
x y Returns:
number number number

Paper
Paper.bottom
Pointstothebottomelementonthepaper

Paper.ca
object

Shortcutfor

Paper.circle(x,y,r)
Drawsacircle.

Parameters
x y r
22 of 49
number number number object

xcoordinateofthecentre ycoordinateofthecentre radius Raphalelementobjectwithtypecircle

10/15/2011 12:33 PM

Returns:

Raphal Reference

http://raphaeljs.com/reference.html

Usage
var c = paper.circle(50, 50, 40);

Paper.clear()
Clearsthepaper,i.e.removesalltheelements.

Paper.customAttributes
object

Ifyouhaveasetofattributesthatyouwouldliketorepresentasa functionofsomenumberyoucandoiteasilywithcustomattributes:

Usage
paper.customAttributes.hue = function (num) { num = num % 1; return {fill: "hsb(" + num + ", 0.75, 1)"}; }; // Custom attribute hue will change fill // to be given hue with fixed saturation and brightness. // Now you can use it like this: var c = paper.circle(10, 10, 10).attr({hue: .45}); // or even like this: c.animate({hue: 1}, 1e3); // You could also create custom attribute // with multiple parameters: paper.customAttributes.hsb = function (h, s, b) { return {fill: "hsb(" + [h, s, b].join(",") + ")"}; }; c.attr({hsb: "0.5 .8 1"}); c.animate({hsb: [1, 0, 0.5]}, 1e3);

Paper.ellipse(x,y,rx,ry)
Drawsanellipse.

23 of 49

Parameters
x
number

xcoordinateofthecentre

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

y rx ry Returns:

number number number object

ycoordinateofthecentre horizontalradius verticalradius Raphalelementobjectwithtypeellipse

Usage
var c = paper.ellipse(50, 50, 40, 20);

Paper.forEach(callback,thisArg)
Executesgivenfunctionforeachelementonthepaper Ifcallbackfunctionreturnsfalseitwillstoplooprunning.

Parameters
callback thisArg Returns:
function object object

functiontorun contextobjectforthecallback Paperobject

Paper.getById(id)
ReturnsyouelementbyitsinternalID.

Parameters
id Returns:
number object

id Raphalelementobject

Paper.getElementByPoint(x,y)
Returnsyoutopmostelementundergivenpoint. Returns:
object

Raphalelementobject

Parameters
x
24 of 49
number

xcoordinatefromthetopleftcornerofthe window 10/15/2011 12:33 PM

number

Raphal Reference

http://raphaeljs.com/reference.html

ycoordinatefromthetopleftcornerofthewindow

Usage
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});

Paper.getFont(family,[weight],[style], [stretch])
Findsfontobjectintheregisteredfontsbygivenparameters.Youcouldspecifyonly onewordfromthefontname,likeMyriadforMyriadPro.

Parameters
family weight style stretch Returns:
string string string string object

fontfamilynameoranywordfromit fontweight fontstyle fontstretch thefontobject

Usage
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

Paper.image(src,x,y,width,height)
Embedsanimageintothesurface.

Parameters
src x y width height Returns:
25 of 49
string number number number number object

URIofthesourceimage xcoordinateposition ycoordinateposition widthoftheimage heightoftheimage Raphalelementobjectwithtypeimage

Usage

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

var c = paper.image("apple.png", 10, 10, 80, 80);

Paper.path([pathString])
Createsapathelementbygivenpathdatastring.

Parameters
pathString
string

pathstringinSVGformat.

Pathstringconsistsofone-lettercommands,followedbycommaseprarated argumentsinnumercalform.Example: "M10,20L30,40" Herewecanseetwocommands:M,witharguments(10, 20)andLwith arguments(30, 40).Uppercaselettermeancommandisabsolute,lower caserelative. Hereisshortlistofcommandsavailable,formoredetailsseeSVGpathstringformat. Command M Z L H V C S Q T A R moveto closepath lineto horizontallineto verticallineto curveto smoothcurveto quadraticBziercurveto smoothquadraticBzier curveto ellipticalarc Catmull-Romcurveto* Name (xy)+ (none) (xy)+ x+ y+ (x1y1x2y2xy)+ (x2y2xy)+ (x1y1xy)+ (xy)+ (rxryx-axis-rotationlarge-arc-flag sweep-flagxy)+ x1y1(xy)+ Parameters

*Catmull-RomcurvetoisanotstandardSVGcommandandaddedin2.0tomake lifeeasier.

Usage
26 of 49

var c = paper.path("M10 10L90 90"); // draw a diagonal line:

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

// move to 10,10, line to 90,90

Paper.print(x,y,text,font,[size],[origin], [letter_spacing])
Createssetofshapestorepresentgivenfontatgivenpositionwithgivensize. Resultofthemethodissetobject(see)whichcontainseachletterasseparatepath object.

Parameters
x y text font size origin letter_spacing Returns:
number number string object number string

xpositionofthetext ypositionofthetext texttoprint fontobject,see sizeofthefont,defaultis16 couldbe"baseline"or"middle",defaultis "middle" numberinrange-1..1,defaultis0 resultingsetofletters

number object

Usage
var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"}); // following line will paint first letter in red txt[0].attr({fill: "#f00"});

Paper.raphael
Pointstotheobject/function

Paper.rect(x,y,width,height,[r])
Drawsarectangle.

Parameters
x
27 of 49
number number

xcoordinateofthetopleftcorner ycoordinateofthetopleftcorner

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

width height r Returns:

number number number object

width height radiusforroundedcorners,defaultis0 Raphalelementobjectwithtyperect

Usage
// regular rectangle var c = paper.rect(10, 10, 50, 50); // rectangle with rounded corners var c = paper.rect(40, 40, 50, 50, 10);

Paper.remove()
RemovesthepaperfromtheDOM.

Paper.renderfix()
FixestheissueofFirefoxandIE9regardingsubpixelrendering.Ifpaperis dependantonotherelementsafterreflowitcouldshifthalfpixelwhichcausefor linestolosttheircrispness.Thismethodfixestheissue.

Paper.safari()
ThereisaninconvenientrenderingbuginSafari(WebKit):sometimestherendering shouldbeforced.Thismethodshouldhelpwithdealingwiththisbug.

Paper.set()
Createsarray-likeobjecttokeepandoperateseveralelementsatonce.Warning:it doesntcreateanyelementsforitselfinthepage,itjustgroupsexistingelements. Setsactaspseudoelementsallmethodsavailabletoanelementcanbeusedon aset. Returns: elements
object

array-likeobjectthatrepresentssetof

28 of 49

Usage

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

var st = paper.set(); st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5) ); st.attr({fill: "red"}); // changes the fill of both circles

Paper.setFinish()
See.Thismethodfinishescatchingandreturnsresultingset. Returns:
object

set

Paper.setSize(width,height)
Ifyouneedtochangedimensionsofthecanvascallthismethod

Parameters
width height
number number

newwidthofthecanvas newheightofthecanvas

Usage
var st = paper.set(); st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5) ); st.attr({fill: "red"});

Paper.setStart()
Creates.Allelementsthatwillbecreatedaftercallingthismethodandbeforecalling willbeaddedtotheset.

Usage
paper.setStart(); paper.circle(10, 10, 5),

29 of 49

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

paper.circle(30, 10, 5) var st = paper.setFinish(); st.attr({fill: "red"}); // changes the fill of both circles

Paper.setViewBox(x,y,w,h,fit)
Setstheviewboxofthepaper.Practicallyitgivesyouabilitytozoomandpanwhole papersurfacebyspecifyingnewboundaries.

Parameters
x y w h fit
number number number number boolean

newxposition,defaultis0 newyposition,defaultis0 newwidthofthecanvas newheightofthecanvas trueifyouwantgraphicstofitintonew boundarybox

Paper.text(x,y,text)
Drawsatextstring.Ifyouneedlinebreaks,put\ninthestring.

Parameters
x y text Returns:
number number string object

xcoordinateposition ycoordinateposition Thetextstringtodraw Raphalelementobjectwithtypetext

Usage
var t = paper.text(50, 50, "Raphal\nkicks\nbutt!");

Paper.top
Pointstothetopmostelementonthepaper

30 of 49

Raphael()

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Createsacanvasobjectonwhichtodraw.Youmustdothisfirst,asallfuturecallsto drawingmethodsfromthisinstancewillbeboundtothiscanvas.

Parameters
container
HTMLElement string

DOMelementoritsIDwhichis goingtobeaparentfordrawing surface

width height callback

number number function

callbackfunctionwhichisgoingtobe executedinthecontextofnewlycreated paper

or x y width height callback

number number number number function

callbackfunctionwhichisgoingtobe executedinthecontextofnewlycreated paper

or all
array

(first3or4elementsinthearrayareequalto [containerID,width,height]or[x,y,width, height].Therestareelementdescriptionsin format{type:type,<attributes>}) callbackfunctionwhichisgoingtobe executedinthecontextofnewlycreated paper

callback

function

or onReadyCallback
function

functionthatisgoingtobecalledonDOM readyevent.Youcanalsosubscribetothis eventviaEvesDOMLoadevent.Inthiscase methodreturnsundefined.

Returns:

object

Usage

31 of 49

// Each of the following examples create a canvas // that is 320px wide by 200px high. // Canvas is created at the viewports 10,50 coordinate. var paper = Raphael(10, 50, 320, 200);

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

// Canvas is created at the top left corner of the #notepad element // (or its top right corner in dir="rtl" elements) var paper = Raphael(document.getElementById("notepad"), 320, 200); // Same as above var paper = Raphael("notepad", 320, 200); // Image dump var set = Raphael(["notepad", 320, 200, { type: "rect", x: 10, y: 10, width: 25, height: 25, stroke: "#f00" }, { type: "text", x: 30, y: 40, text: "Dump" }]);

Raphael.angle(x1,y1,x2,y2,[x3],[y3])
Returnsanglebetweentwoorthreepoints

Parameters
x1 y1 x2 y2 x3 y3 Returns:
number number number number number number number

xcoordoffirstpoint ycoordoffirstpoint xcoordofsecondpoint ycoordofsecondpoint xcoordofthirdpoint ycoordofthirdpoint angleindegrees.

Raphael.animation(params,ms,[easing], [callback])
Createsananimationobjectthatcanbepassedtotheormethods.Seealsoand methods.
32 of 49 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
params ms easing callback
object number string

finalattributesfortheelement,seealso numberofmillisecondsforanimationtorun easingtype.AcceptoneoforCSSformat: cubicbezier(XX, XX, XX, XX) callbackfunction.Willbecalledattheendof animation.

function

Returns:

object

Raphael.color(clr)
Parsesthecolorstringandreturnsobjectwithallvaluesforthegivencolor.

Parameters
clr
string

colorstringinoneofthesupportedformats (see) CombinedRGB&HSBobjectinformat:

Returns: { r g b hex error h s v l }

number number number string boolean number number number number

object

red, green, blue, colorinHTML/CSSformat:#, trueifstringcantbeparsed, hue, saturation, value(brightness), lightness

Raphael.createUUID()
ReturnsRFC4122,version4ID

Raphael.deg(deg)
Transformangletodegrees
33 of 49

Parameters
deg

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

number

angleinradians
number

Returns:

angleindegrees.

Raphael.easing_formulas
Objectthatcontainseasingformulasforanimation.Youcouldextenditwithyour own.Bydefaultithasfollowinglistofeasing: linear <oreaseInorease-in >oreaseOutorease-out <>oreaseInOutorease-in-out backInorback-in backOutorback-out elastic bounce SeealsoEasingdemo.

Raphael.el
Youcanaddyourownmethodtoelements.Thisisusefullwhenyou wanttohackdefaultfunctionalityorwanttowrapsomecommon transformationorattributesinonemethod.Indifferencetocanvasmethods,youcan redefineelementmethodatanytime.Expendingelementmethodswouldntaffect set.
object

Usage
Raphael.el.red = function () { this.attr({fill: "#f00"}); }; // then use it paper.circle(100, 100, 20).red();

Raphael.findDotsAtSegment(p1x,p1y,c1x, c1y,c2x,c2y,p2x,p2y,t)
34 of 49

UtilitymethodFinddotcoordinatesonthegivencubicbeziercurveatthegivent.

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
p1x p1y c1x c1y c2x c2y p2x p2y t Returns: { x: y: m:{ x: y: } n:{ x: y: } start:{ x: y: } end:{ x: y: } alpha: }
number number number number number number number number number number number number number number number number number number object

xofthefirstpointofthecurve yofthefirstpointofthecurve xofthefirstanchorofthecurve yofthefirstanchorofthecurve xofthesecondanchorofthecurve yofthesecondanchorofthecurve xofthesecondpointofthecurve yofthesecondpointofthecurve positiononthecurve(0..1) pointinformationinformat:

xcoordinateofthepoint ycoordinateofthepoint
number number

xcoordinateoftheleftanchor ycoordinateoftheleftanchor

xcoordinateoftherightanchor ycoordinateoftherightanchor

xcoordinateofthestartofthecurve ycoordinateofthestartofthecurve

xcoordinateoftheendofthecurve ycoordinateoftheendofthecurve

angleofthecurvederivativeatthepoint

Raphael.fn
Youcanaddyourownmethodtothecanvas.Forexampleifyouwant todrawapiechart,youcancreateyourownpiechartfunctionand shipitasaRaphalplugin.TodothisyouneedtoextendtheRaphael.fnobject. Pleasenotethatyoucancreateyourownnamespacesinsidethefnobject 10/15/2011 12:33 PM
object

35 of 49

Raphal Reference

http://raphaeljs.com/reference.html

methodswillberuninthecontextofcanvasanyway.Youshouldalterthefnobject beforeaRaphalinstanceiscreated,otherwiseitwilltakenoeffect.

Usage
Raphael.fn.arrow = function (x1, y1, x2, y2, size) { return this.path( ... ); }; // or create namespace Raphael.fn.mystuff = { arrow: function () {}, star: function () {}, // etc }; var paper = Raphael(10, 10, 630, 480); // then use it paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"}); paper.mystuff.arrow(); paper.mystuff.star();

Raphael.format(token,)
Simpleformatfunction.Replacesconstructionoftype{<number>}tothe correspondingargument.

Parameters
token
string string

stringtoformat restofargumentswillbetreatedas parametersforreplacement formatedstring

Returns:

string

Usage
var x = 10, y = 20, width = 40, height = 50; // this will draw a rectangular shape equivalent to "M10,20h40v50h-40z" paper.path(Raphael.format("M{1},{2}h{3}v{4}h{5}z", x, y, width, height, -width));
36 of 49 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Raphael.fullfill(token,json)
Alittlebitmoreadvancedformatfunctionthan.Replacesconstructionoftype {<name>}tothecorrespondingargument.

Parameters
token json
string object

stringtoformat objectwhichpropertieswillbeusedasa replacement formatedstring

Returns:

string

Usage

// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z" paper.path(Raphael.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width' x: 10, y: 20, dim: { width: 40, height: 50, "negative width": -40 } }));

Raphael.getColor([value])
Oneachcallreturnsnextcolourinthespectrum.Toresetitbacktoredcall

Parameters
value Returns:
number string

brightness,defaultis0.75 hexrepresentationofthecolour.

Raphael.getColor.reset()
Resetsspectrumpositionforbacktored.

Raphael.getPointAtLength(path,length)
37 of 49

Returncoordinatesofthepointlocatedatthegivenlengthonthegivenpath.

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
path length Returns: { x: y: alpha: }
number number number string number object

SVGpathstring representationofthepoint:

xcoordinate ycoordinate angleofderivative

Raphael.getRGB(colour)
ParsescolourstringasRGBobject

Parameters
colour
string

colourstringinoneofformats:

Colourname(red,green,cornflowerblue,etc) #shortenedHTMLcolour:(#000,#fc0,etc) #fulllengthHTMLcolour:(#000000,#bd2300) rgb(,,)red,greenandbluechannelsvalues: (rgb(200, 100, 0)) rgb(%,%,%)sameasabove,butin%:(rgb(100%, 175%, 0%)) hsb(,,)hue,saturationandbrightnessvalues: (hsb(0.5, 0.25, 1)) hsb(%,%,%)sameasabove,butin% hsl(,,)sameashsb hsl(%,%,%)sameashsb Returns: { r g b hex error }
38 of 49 10/15/2011 12:33 PM
number number number string boolean object

RGBobjectinformat:

red, green, blue colorinHTML/CSSformat:#, trueifstringcantbeparsed

Raphal Reference

http://raphaeljs.com/reference.html

Raphael.getSubpath(path,from,to)
Returnsubpathofagivenpathfromgivenlengthtogivenlength.

Parameters
path from to Returns:
string number number string

SVGpathstring positionofthestartofthesegment positionoftheendofthesegment pathstringforthesegment

Raphael.getTotalLength(path)
Returnslengthofthegivenpathinpixels.

Parameters
path Returns:
string number

SVGpathstring. length.

Raphael.hsb(h,s,b)
ConvertsHSBvaluestohexrepresentationofthecolour.

Parameters
h s b Returns:
number number number string

hue saturation valueorbrightness hexrepresentationofthecolour.

Raphael.hsb2rgb(h,s,v)
ConvertsHSBvaluestoRGBobject.

Parameters
h
39 of 49
number number number

hue saturation valueorbrightness

10/15/2011 12:33 PM

s v Returns:

Raphal Reference

http://raphaeljs.com/reference.html

object

RGBobjectinformat:

{ r g b hex }
number number number string

red, green, blue, colorinHTML/CSSformat:#

Raphael.hsl(h,s,l)
ConvertsHSLvaluestohexrepresentationofthecolour.

Parameters
h s l Returns:
number number number string

hue saturation luminosity hexrepresentationofthecolour.

Raphael.hsl2rgb(h,s,l)
ConvertsHSLvaluestoRGBobject.

Parameters
h s l Returns: { r g b hex }
number number number string number number number object

hue saturation luminosity RGBobjectinformat:

red, green, blue, colorinHTML/CSSformat:#

40 of 49

Raphael.is(o,type)

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Handfullreplacementfortypeofoperator.

Parameters
o type
string

anyobjectorprimitive nameofthetype,i.e.string,function, number,etc. isgivenvalueisofgiventype

Returns:

boolean

Raphael.matrix(a,b,c,d,e,f)
UtilitymethodReturnsmatrixbasedongivenparameters.

Parameters
a b c d e f Returns:
number number number number number number object

Raphael.ninja()
IfyouwanttoleavenotraceofRaphal(Well,Raphalcreatesonlyoneglobal variableRaphael,butanyway.)Youcanuseninjamethod.Beware,thatinthis casepluginscouldstopworking,becausetheyaredependingonglobalvariable existance. Returns:
object

Raphaelobject

Usage
(function (local_raphael) { var paper = local_raphael(10, 10, 320, 200); })(Raphael.ninja());

41 of 49

Raphael.parsePathString(pathString)

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

UtilitymethodParsesgivenpathstringintoanarrayofarraysofpathsegments.

Parameters
pathString
string array

pathstringorarrayofsegments (inthelastcaseitwillbe returnedstraightaway)

Returns:

array

arrayofsegments.

Raphael.parseTransformString(TString)
UtilitymethodParsesgivenpathstringintoanarrayoftransformations.

Parameters
TString
string array

transformstringorarrayof transformations(inthelastcase itwillbereturnedstraightaway)

Returns:

array

arrayoftransformations.

Raphael.path2curve(pathString)
UtilitymethodConvertspathtoanewpathwhereallsegmentsarecubicbezier curves.

Parameters
pathString Returns:
string array array

pathstringorarrayofsegments

arrayofsegments.

Raphael.pathToRelative(pathString)
UtilitymethodConvertspathtorelativeform

Parameters
pathString Returns:
42 of 49
string array array

pathstringorarrayofsegments

arrayofsegments.
10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Raphael.rad(deg)
Transformangletoradians

Parameters
deg Returns:
number number

angleindegrees angleinradians.

Raphael.registerFont(font)
AddsgivenfonttotheregisteredsetoffontsforRaphal.Shouldbeusedasan internalcallfromwithinCufnsfontfile.Returnsoriginalparameter,soitcouldbe usedwithchaining. MoreaboutCufnandhowtoconvertyourfontformTTF,OTF,etctoJavaScriptfile.

Parameters
font Returns:
object object

thefonttoregister thefontyoupassedin

Usage
Cufon.registerFont(Raphael.registerFont({}));

Raphael.rgb(r,g,b)
ConvertsRGBvaluestohexrepresentationofthecolour.

Parameters
r g b Returns:
number number number string

red green blue hexrepresentationofthecolour.

Raphael.rgb2hsb(r,g,b)
43 of 49

ConvertsRGBvaluestoHSBobject.

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Parameters
r g b Returns: { h s b }
number number number number number number object

red green blue HSBobjectinformat:

hue saturation brightness

Raphael.rgb2hsl(r,g,b)
ConvertsRGBvaluestoHSLobject.

Parameters
r g b Returns: { h s l }
number number number number number number object

red green blue HSLobjectinformat:

hue saturation luminosity

Raphael.setWindow(newwin)
Usedwhenyouneedtodrawin<iframe>.Switchedwindowtotheiframeone.

Parameters
newwin
window

newwindowobject

44 of 49

Raphael.snapTo(values,value,[tolerance]) 10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Snapsgivenvaluetogivengrid.

Parameters
values value tolerance Returns:
array number

givenarrayofvaluesorstepof thegrid

number number number

valuetoadjust toleranceforsnapping.Defaultis10. adjustedvalue.

Raphael.st
Youcanaddyourownmethodtoelementsandsets.Itiswisetoadd asetmethodforeachelementmethodyouadded,soyouwillbeable tocallthesamemethodonsetstoo.Seealso.
object

Usage
Raphael.el.red = function () { this.attr({fill: "#f00"}); }; Raphael.st.red = function () { this.forEach(function () { this.red(); }); }; // then use it paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();

Raphael.svg
boolean

trueifbrowsersupportsSVG.

Raphael.type
string

CanbeSVG,VMLorempty,dependingonbrowsersupport.

45 of 49

Raphael.vml
boolean

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

trueifbrowsersupportsVML.

Set
Set.clear()
Removedsallelementsfromtheset

Set.exclude(element)
Removesgivenelementfromtheset

Parameters
element Returns: set
object boolean

elementtoremove trueifobjectwasfound&removedfromthe

Set.forEach(callback,thisArg)
Executesgivenfunctionforeachelementintheset. Iffunctionreturnsfalseitwillstoplooprunning.

Parameters
callback thisArg Returns:
function object object

functiontorun contextobjectforthecallback Setobject

Set.pop()
Removeslastelementandreturnsit. Returns:
object

element

46 of 49

Set.push()

10/15/2011 12:33 PM

Raphal Reference

http://raphaeljs.com/reference.html

Addseachargumenttothecurrentset. Returns:
object

originalelement

Set.splice(index,count,[insertion])
Removesgivenelementfromtheset

Parameters
index count insertion Returns:
number number object object

positionofthedeletion numberofelementtoremove elementstoinsert setelementsthatweredeleted

eve(name,scope,varargs)
Fireseventwithgivenname,givenscopeandotherparameters.

Arguments
name scope varargs
string

nameoftheevent,dot(.)orslash(/) separated contextfortheeventhandlers therestofargumentswillbesenttoevent handlers arrayofreturnedvaluesfromthelisteners

object ...

Returns:

object

eve.listeners(name)
Internalmethodwhichgivesyouarrayofalleventhandlersthatwillbetriggeredby thegivenname.

Arguments
name
string

nameoftheevent,dot(.)orslash(/) separated arrayofeventhandlers

10/15/2011 12:33 PM

47 of 49

Returns:

array

Raphal Reference

http://raphaeljs.com/reference.html

eve.nt([subname])
Couldbeusedinsideeventhandlertofigureoutactualnameoftheevent.

Arguments
subname Returns: or Returns: subname
boolean string string

subnameoftheevent nameoftheevent,ifsubnameisnotspecified

true,ifcurrenteventsnamecontains

eve.on(name,f)
Bindsgiveneventhandlerwithagivenname.Youcanusewildcards*forthe names: eve.on("*.under.*", f); eve("mouse.under.floor"); // triggers f Usetotriggerthelistener.

Arguments
name f
string

nameoftheevent,dot(.)orslash(/) separated,withoptionalwildcards eventhandlerfunction

function

function Returns: returnedfunctionacceptonenumber parameterthatrepresentsz-indexofthehandler.Itisoptionalfeatureandonlyused whenyouneedtoensurethatsomesubsetofhandlerswillbeinvokedinagiven order,despiteoftheorderofassignment.

Example:
eve.on("mouse", eat)(2); eve.on("mouse", scream); eve.on("mouse", catch)(1); Thiswillensurethatcatchfunctionwillbecalledbeforeeat.Ifyouwanttoputyou 10/15/2011 12:33 PM hadlerbeforenotindexedhandlersspecifynegativevalue.Note:Iassumemostof

48 of 49

Raphal Reference

http://raphaeljs.com/reference.html

thetimeyoudontneedtoworryaboutz-index,butitsnicetohavethisfeaturejust incase.

eve.stop()
Isusedinsideeventhandlertostopevent

eve.unbind(name,f)
Removesgivenfunctionfromthelistofeventlistenersassignedtogivenname.

Arguments
name f
string

nameoftheevent,dot(.)orslash(/) separated,withoptionalwildcards eventhandlerfunction

function

eve.version
string

Currentversionofthelibrary.

49 of 49

10/15/2011 12:33 PM