raphael js

delay number

Returns: object

repeat number

Returns: object

Raphaël Reference

Creates a copy of existing animation object with given delay.

Parameters

number of ms to pass between animation start

and actual animation

new altered Animation object

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

Creates a copy of existing animation object with given repetition.

Parameters

number iterations of animation. For infinite

animation pass Infinity

new altered Animation object

Animation

Animation.delay(delay)

Animation.repeat(repeat)

Element

Raphaël Reference http://raphaeljs.com/reference.html

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

params object

ms number

easing string

callback function

animation object

Returns: object

element object

anim object

params object

ms number

easing string

callback function

element object

anim object

animation object

Returns: object

Creates and starts animation for given element.

Parameters

final attributes for the element, see also

number of milliseconds for animation to run

easing type. Accept one of or CSS format:

cubic‐bezier(XX, XX, XX, XX)

callback function. Will be called at the end of

animation.

or

animation object, see

original element

Acts similar to , but ensure that given animation runs in sync with another given

element.

Parameters

element to sync with

animation to sync with



easing type. Accept on of or CSS format:



animation.

or

element to sync with

animation to sync with

animation object, see

original element

Element.animate(…)

Element.animateWith(…)

Element.attr(…)


2 of 49 10/15/2011 12:33 PM

attrName string

value string

params object

attrName string

attrNames array

Returns: object

Returns: ...

Returns: array

Returns: object

arrow-end string

clip-rect string

cursor string

cx number

cy number

fill string

fill-opacity number

font string

font-family string

font-size number

font-weight string

height number

href string

opacity

Sets the attributes of the element.

Parameters

attribute’s name

value

or

object of name/value pairs

or

attribute’s name

or

in this case method returns array of current

values for given attribute names

if attrsName & value or params are passed in.

value of the attribute if only attrsName is

passed in.

array of values of the attribute if attrsNames is

passed in.

object of attributes if nothing is passed in.

Possible parameters

Please refer to the SVG specification for an explanation of these parameters.

arrowhead on the end of the path. The format for string is

<type>[-<width>[-<length>]]. Possible types:

classic, block, open, oval, diamond, none, width:

wide, narrow, midium, length: long, short, midium.

comma or space separated values: x, y, width and height

CSS type of the cursor

colour, gradient or image

font size in pixels

URL, if specified element behaves as hyperlink


3 of 49 10/15/2011 12:33 PM

number

path string

r number

rx number

ry number

src string

stroke string

stroke-dasharray string

stroke-linecap string

stroke-linejoin string

stroke-miterlimit number

stroke-opacity number

stroke-width number

target string

text string

text-anchor string

title string

transform string

width number

x number

y number

SVG path string format

image URL, only works for element

stroke colour

[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”,

“--..”]

[“butt”, “square”, “round”]

[“bevel”, “round”, “miter”]

stroke width in pixels, default is '1'

used with href

contents of the text element. Use \n for multiline text

[“start”, “middle”, “end”], default is “middle”

will create tooltip with a given text

see

Gradients

Linear gradient format: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “90-#fff-#000” – 90° gradient from white to black or

“0-#fff-#f00:20-#000” – 0° gradient from white via red (at 20%) to black.

radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “r#fff-#000” – gradient from white to black or “r(0.25,0.75)#fff-#000” – gradient from white to black with focus point at 0.25, 0.75.

Focus point coordinates are in 0..1 range. Radial gradients can only be applied to

circles and ellipses.

Path String

Please refer to SVG documentation regarding path string. Raphaël fully supports it.

Colour Parsing

Colour name (“red”, “green”, “cornflowerblue”, etc)

#••• — shortened HTML colour: (“#000”, “#fc0”, etc)

#•••••• — full length HTML colour: (“#000000”, “#bd2300”)

rgb(•••, •••, •••) — red, green and blue channels’ values:


4 of 49 10/15/2011 12:33 PM

handler function

Returns: object

Returns: object

key string

value any

Returns: object

Returns: any

(“rgb(200, 100, 0)”)

rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)

rgba(•••, •••, •••, •••) — red, green and blue channels’ values:

(“rgba(200, 100, 0, .5)”)

rgba(•••%, •••%, •••%, •••%) — same as above, but in %:

(“rgba(100%, 175%, 0%, 50%)”)

hsb(•••, •••, •••) — hue, saturation and brightness values:

(“hsb(0.5, 0.25, 1)”)

hsb(•••%, •••%, •••%) — same as above, but in %

hsba(•••, •••, •••, •••) — same as above, but with opacity

hsl(•••, •••, •••) — almost the same as hsb, see Wikipedia page

hsl(•••%, •••%, •••%) — same as above, but in %

hsla(•••, •••, •••, •••) — same as above, but with opacity

Optionally for hsb and hsl you could specify hue as a degree:

“hsl(240deg, 1, .5)” or, if you want to go fancy, “hsl(240°, 1, .5)”

Adds event handler for click for the element.

Parameters

handler for the event

clone of a given element

Adds or retrieves given value asociated with given key. See also

Parameters

key to store data

value to store

or, if value is not specified:

value

Usage

Element.click(handler)

Element.clone()

Element.data(key, [value])


5 of 49 10/15/2011 12:33 PM

handler function

Returns: object

onmove function

onstart function

onend function

mcontext object

scontext object

econtext object

x number

y number

event object

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")); });}

Adds event handler for double click for the element.

Parameters


Adds event handlers for drag of the element.

Parameters

handler for moving

handler for drag start

handler for drag end

context for moving handler

context for drag start handler

context for drag end handler

Additionaly following drag events will be triggered: drag.start.<id> on start,

drag.end.<id> on end and drag.move.<id> on every move. When element will

be dragged over another element drag.over.<id> will be fired as well.

Start event and start handler will be called in specified context or in context of the

element with following parameters:

x position of the mouse

y position of the mouse

DOM event object

Element.dblclick(handler)

Element.drag(onmove, onstart, onend,

[mcontext], [scontext], [econtext])


6 of 49 10/15/2011 12:33 PM

dx number

dy number

x number

y number

event object

event object

Returns: object

isWithoutTransform boolean

Returns: object

x: number

y: number

width: number

height: number

length number

Returns: object

Move event and move handler will be called in specified context or in context of the


shift by x from the start point

shift by y from the start point

x position of the mouse

y position of the mouse

DOM event object

End event and end handler will be called in specified context or in context of the


DOM event object

Return bounding box for a given element

Parameters

flag, true if you want to have bounding box

before transformations. Default is false.

Bounding box object:

{

top left corner x

top left corner y

width

height

}

Return coordinates of the point located at the given length on the given path. Only

works for element of “path” type.

Parameters

representation of the point:

Element.getBBox(isWithoutTransform)

Element.getPointAtLength(length)


7 of 49 10/15/2011 12:33 PM

x: number

y: number

alpha: number

from number

to number

Returns: string

Returns: number

glow object

width number

fill boolean

opacity number

offsetx number

offsety number

color string

{

x coordinate

y coordinate

angle of derivative

}

Return subpath of a given element from given length to given length. Only works for

element of “path” type.

Parameters

position of the start of the segment

position of the end of the segment

pathstring for the segment

Returns length of the path in pixels. Only works for element of “path” type.

length.

Return set of elements that create glow-like effect around given element. See .

Note: Glow is not connected to the element. If you change element attributes it won’t

adjust itself.

Parameters

parameters object with all properties optional:

{

size of the glow, default is 10will it be filled, default is falseopacity, default is 0.5horizontal offset, default is 0vertical offset, default is 0glow colour, default is black

Element.getSubpath(from, to)

Element.getTotalLength()

Element.glow([glow])


8 of 49 10/15/2011 12:33 PM

Returns: object

Returns: object

f_in function

f_out function

icontext object

ocontext object

Returns: object

number

Returns: object

Returns: object

}

of elements that represents glow

Makes element invisible. See .

Adds event handlers for hover for the element.

Parameters

handler for hover in

handler for hover out

context for hover in handler

context for hover out handler

Unique id of the element. Especially usesful when you want to listen

to events of the element, because all events are fired in format

<module>.<action>.<id>. Also useful for method.

Inserts current object after the given one.

Inserts current object before the given one.

Element.hide()

Element.hover(f_in, f_out, [icontext],

[ocontext])

Element.id

Element.insertAfter()

Element.insertBefore()

Element.mousedown(handler)


9 of 49 10/15/2011 12:33 PM

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

object

Adds event handler for mousedown for the element.

Parameters


Adds event handler for mousemove for the element.

Parameters


Adds event handler for mouseout for the element.

Parameters


Adds event handler for mouseover for the element.

Parameters


Adds event handler for mouseup for the element.

Parameters


Element.mousemove(handler)

Element.mouseout(handler)

Element.mouseover(handler)

Element.mouseup(handler)

Element.next


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

object

f function

object

Reference to the next element in the hierarchy.

Gives you a reference to the DOM object, so you can assign event

handlers or just mess around. Note: Don’t mess with it.

Usage

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

Shortcut for assigning event handler for drag.over.<id> event, where id is id of

the element (see ).

Parameters

handler for event, first argument would be the

element you are dragging over

Internal reference to “paper” where object drawn. Mainly for use in

plugins and element extensions.

Usage

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

Element.node

Element.onDragOver(f)

Element.paper

Element.pause([anim])


11 of 49 10/15/2011 12:33 PM

anim object

Returns: object

object

object

key string

Returns: object

Stops animation of the element with ability to resume it later on.

Parameters

animation object

original element

Reference to the previous element in the hierarchy.

Internal reference to object. In case it is not available.

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});}

Removes element form the paper.

Removes value associated with an element by given key. If key is not provided,

removes all the data of the element.

Parameters

key

Resumes animation if it was paused with method.

Element.prev

Element.raphael

Element.remove()

Element.removeData([key])

Element.resume([anim])


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

anim object

Returns: object

deg number

cx number

cy number

Returns: object

sx number

sy number

cx number

cy number

Returns: object

anim object

value number

Returns:

Parameters

animation object

original element

Adds rotation by given angle around given point to the list of transformations of the

element.

Parameters

angle in degrees

x coordinate of the centre of rotation

y coordinate of the centre of rotation

If cx & cy aren’t specified centre of the shape is used as a point of rotation.

Adds scale by given amount relative to given point to the list of transformations of the

element.

Parameters

horisontal scale amount

vertical scale amount

x coordinate of the centre of scale

y coordinate of the centre of scale

If cx & cy aren’t specified centre of the shape is used instead.

Sets the status of animation of the element in milliseconds. Similar to method.

Parameters

animation object

number of milliseconds from the beginning of

the animation

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

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

Element.setTime(anim, value)


13 of 49 10/15/2011 12:33 PM

object

Returns: object

anim object

value number

Returns: number

Returns: array

anim: object

status: number

Returns: object

anim

original element if value is specified

Note, that during animation following events are triggered:

On each animation frame event anim.frame.<id>, on start anim.start.<id> and

on end anim.finish.<id>.

Makes element visible. See .

Gets or sets the status of animation of the element.

Parameters

animation object

0 – 1. If specified, method works like a setter

and sets the status of a given animation to the

value. This will cause animation to jump to the

given position.

status

or

status if anim is not specified. Array of objects

in format:

{

animation object

status

}

or

original element if value is specified

Stops animation of the element.

Parameters

Element.show()

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

Element.stop([anim])


14 of 49 10/15/2011 12:33 PM

object

Returns: object

Returns: object

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

animation object

original element

Moves the element so it is the furthest from the viewer’s eyes, behind other

elements.

Moves the element so it is the closest to the viewer’s eyes, on top of other elements.

Adds event handler for touchcancel for the element.

Parameters


Adds event handler for touchend for the element.

Parameters


Adds event handler for touchmove for the element.

Parameters


Element.toBack()

Element.toFront()

Element.touchcancel(handler)

Element.touchend(handler)

Element.touchmove(handler)

Element.touchstart(handler)


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

handler function

Returns: object

Adds event handler for touchstart for the element.

Parameters


Adds transformation to the element which is separate to other attributes, i.e.

translation doesn’t change x or y of the rectange. The format of transformation string

is similar to the path string syntax:

"t100,100r30,100,100s2,2,100,100r45s1.5"

Each letter is a command. There are four commands: t is for translate, r is for rotate,

s is for scale and m is for matrix.

There are also alternative “absolute” translation, rotation and scale: T, R and S. They

will not take previous transformation into account. For example, ...T100,0 will

always move element 100 px horisontally, while ...t100,0 could move it vertically

if there is r90 before. Just compare results of r90t100,0 and r90T100,0.

So, the example line above could be read like “translate by 100, 100; rotate 30°

around 100, 100; scale twice around 100, 100; rotate 45° around centre; scale 1.5

times relative to centre”. As you can see rotate and scale commands have origin

coordinates as optional parameters, the default is the centre point of the element.

Matrix accepts six parameters.

Usage

var el = paper.rect(10, 20, 300, 200);// translate 100, 100, rotate 45°, translate -100, 0el.transform("t100,100r45t-100,0");// if you want you can append or prepend transformationsel.transform("...t50,50");el.transform("s2...");// or even wrapel.transform("t50,50...t-50-50");// to reset transformation call method with empty stringel.transform("");// to get current value call it without parametersconsole.log(el.transform());

Element.transform([tstr])


16 of 49 10/15/2011 12:33 PM

tstr string

Returns: string

Returns: object

dx number

dy number

Returns: object

handler function

Returns: object

handler function

Returns: object

Parameters

transformation string

If tstr isn’t specified

current transformation string

else

Adds translation by given amount to the list of transformations of the element.

Parameters

horisontal shift

vertical shift

Removes event handler for click for the element.

Parameters


Removes event handler for double click for the element.

Parameters


Removes all drag event handlers from given element.

Element.translate(dx, dy)

Element.unclick(handler)

Element.undblclick(handler)

Element.undrag()

Element.unhover(f_in, f_out)


17 of 49 10/15/2011 12:33 PM

f_in function

f_out function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

Removes event handlers for hover for the element.

Parameters

handler for hover in

handler for hover out

Removes event handler for mousedown for the element.

Parameters


Removes event handler for mousemove for the element.

Parameters


Removes event handler for mouseout for the element.

Parameters


Removes event handler for mouseover for the element.

Parameters


Element.unmousedown(handler)

Element.unmousemove(handler)

Element.unmouseout(handler)

Element.unmouseover(handler)


18 of 49 10/15/2011 12:33 PM

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

handler function

Returns: object

Removes event handler for mouseup for the element.

Parameters


Removes event handler for touchcancel for the element.

Parameters


Removes event handler for touchend for the element.

Parameters


Removes event handler for touchmove for the element.

Parameters


Removes event handler for touchstart for the element.

Parameters


Element.unmouseup(handler)

Element.untouchcancel(handler)

Element.untouchend(handler)

Element.untouchmove(handler)

Element.untouchstart(handler)


19 of 49 10/15/2011 12:33 PM

a number

b number

c number

d number

e number

f number

matrix object

Returns: object

Returns: object

a number

x number

y number

Adds given matrix to existing one.

Parameters

Returns copy of the matrix

Returns inverted version of the matrix

Rotates the matrix

Parameters

Scales the matrix

Matrix

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

Matrix.clone()

Matrix.invert()

Matrix.rotate(a, x, y)

Matrix.scale(x, [y], [cx], [cy])


20 of 49 10/15/2011 12:33 PM

x number

y number

cx number

cy number

Returns: object

dx number

dy number

scalex number

scaley number

shear number

rotate number

isSimple boolean

Returns: string

x number

y number

Parameters

Splits matrix into primitive transformations

in format:

translation by x

translation by y

scale by x

scale by y

shear

rotation in deg

could it be represented via simple transformations

Return transform string that represents given matrix

transform string

Translate the matrix

Parameters

Return x coordinate for given point after transformation described by the matrix. See

also

Matrix.split()

Matrix.toTransformString()

Matrix.translate(x, y)

Matrix.x(x, y)


21 of 49 10/15/2011 12:33 PM

x number

y number

Returns: number

x number

y number

Returns: number

object

x number

y number

r number

Returns: object

Parameters

x

Return y coordinate for given point after transformation described by the matrix. See

also

Parameters

y

Points to the bottom element on the paper

Shortcut for

Draws a circle.

Parameters

x coordinate of the centre

y coordinate of the centre

radius

Raphaël element object with type “circle”

Matrix.y(x, y)

Paper

Paper.bottom

Paper.ca

Paper.circle(x, y, r)


22 of 49 10/15/2011 12:33 PM

object

x number

Usage

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

Clears the paper, i.e. removes all the elements.

If you have a set of attributes that you would like to represent as a

function of some number you can do it easily with custom attributes:

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);

Draws an ellipse.

Parameters

x coordinate of the centre

Paper.clear()

Paper.customAttributes

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


23 of 49 10/15/2011 12:33 PM

y number

rx number

ry number

Returns: object

callback function

thisArg object

Returns: object

id number

Returns: object

Returns: object

x number

y number

y coordinate of the centre

horizontal radius

vertical radius

Raphaël element object with type “ellipse”

Usage

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

Executes given function for each element on the paper

If callback function returns false it will stop loop running.

Parameters

function to run

context object for the callback

Paper object

Returns you element by its internal ID.

Parameters

id

Raphaël element object

Returns you topmost element under given point.

Raphaël element object

Parameters

x coordinate from the top left corner of the

window

Paper.forEach(callback, thisArg)

Paper.getById(id)

Paper.getElementByPoint(x, y)


24 of 49 10/15/2011 12:33 PM

family string

weight string

style string

stretch string

Returns: object

src string

x number

y number

width number

height number

Returns: object

y coordinate from the top left corner of the window

Usage

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

Finds font object in the registered fonts by given parameters. You could specify only

one word from the font name, like “Myriad” for “Myriad Pro”.

Parameters

font family name or any word from it

font weight

font style

font stretch

the font object

Usage

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

Embeds an image into the surface.

Parameters

URI of the source image

x coordinate position

y coordinate position

width of the image

height of the image

Raphaël element object with type “image”

Usage

Paper.getFont(family, [weight], [style],

[stretch])

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


25 of 49 10/15/2011 12:33 PM

pathString string

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

Creates a path element by given path data string.

Parameters

path string in SVG format.

Path string consists of one-letter commands, followed by comma seprarated

arguments in numercal form. Example:

"M10,20L30,40"

Here we can see two commands: “M”, with arguments (10, 20) and “L” with

arguments (30, 40). Upper case letter mean command is absolute, lower

case—relative.

Here is short list of commands available, for more details see SVG path string format.

Command Name Parameters

M moveto (x y)+

Z closepath (none)

L lineto (x y)+

H horizontal lineto x+

V vertical lineto y+

C curveto (x1 y1 x2 y2 x y)+

S smooth curveto (x2 y2 x y)+

Q quadratic Bézier curveto (x1 y1 x y)+

Tsmooth quadratic Bézier

curveto(x y)+

A elliptical arc(rx ry x-axis-rotation large-arc-flag

sweep-flag x y)+

R Catmull-Rom curveto* x1 y1 (x y)+

* “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make

life easier.

Usage

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

Paper.path([pathString])


26 of 49 10/15/2011 12:33 PM

x number

y number

text string

font object

size number

origin string

letter_spacing number

Returns: object

x number

y number

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

Creates set of shapes to represent given font at given position with given size.

Result of the method is set object (see ) which contains each letter as separate path

object.

Parameters

x position of the text

y position of the text

text to print

font object, see

size of the font, default is 16

could be "baseline" or "middle", default is

"middle"

number in range -1..1, default is 0

resulting set of letters

Usage

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

Points to the object/function

Draws a rectangle.

Parameters

x coordinate of the top left corner

y coordinate of the top left corner

Paper.print(x, y, text, font, [size], [origin],

[letter_spacing])

Paper.raphael

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


27 of 49 10/15/2011 12:33 PM

width number

height number

r number

Returns: object

Returns: object

width

height

radius for rounded corners, default is 0

Raphaël element object with type “rect”

Usage

// regular rectanglevar c = paper.rect(10, 10, 50, 50);// rectangle with rounded cornersvar c = paper.rect(40, 40, 50, 50, 10);

Removes the paper from the DOM.

Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is

dependant on other elements after reflow it could shift half pixel which cause for

lines to lost their crispness. This method fixes the issue.

There is an inconvenient rendering bug in Safari (WebKit): sometimes the rendering

should be forced. This method should help with dealing with this bug.

Creates array-like object to keep and operate several elements at once. Warning: it

doesn’t create any elements for itself in the page, it just groups existing elements.

Sets act as pseudo elements — all methods available to an element can be used on

a set.

array-like object that represents set of

elements

Usage

Paper.remove()

Paper.renderfix()

Paper.safari()

Paper.set()


28 of 49 10/15/2011 12:33 PM

Returns: object

width number

height number

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

See . This method finishes catching and returns resulting set.

set

If you need to change dimensions of the canvas call this method

Parameters

new width of the canvas

new height of the canvas

Usage

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

Creates . All elements that will be created after calling this method and before calling

will be added to the set.

Usage

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

Paper.setFinish()

Paper.setSize(width, height)

Paper.setStart()


29 of 49 10/15/2011 12:33 PM

x number

y number

w number

h number

fit boolean

x number

y number

text string

Returns: object

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

Sets the view box of the paper. Practically it gives you ability to zoom and pan whole

paper surface by specifying new boundaries.

Parameters

new x position, default is 0

new y position, default is 0

new width of the canvas

new height of the canvas

true if you want graphics to fit into new

boundary box

Draws a text string. If you need line breaks, put “\n” in the string.

Parameters

x coordinate position

y coordinate position

The text string to draw

Raphaël element object with type “text”

Usage

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

Points to the topmost element on the paper

Paper.setViewBox(x, y, w, h, fit)

Paper.text(x, y, text)

Paper.top

Raphael(…)


30 of 49 10/15/2011 12:33 PM

container HTMLElement string

width number

height number

callback function

x number

y number

width number

height number

callback function

all array

callback function

onReadyCallback function

Returns: object

Creates a canvas object on which to draw. You must do this first, as all future calls to

drawing methods from this instance will be bound to this canvas.

Parameters

DOM element or its ID which is

going to be a parent for drawing

surface

callback function which is going to be

executed in the context of newly created

paper

or



paper

or

(first 3 or 4 elements in the array are equal to

[containerID, width, height] or [x, y, width,

height]. The rest are element descriptions in

format {type: type, <attributes>})



paper

or

function that is going to be called on DOM

ready event. You can also subscribe to this

event via Eve’s “DOMLoad” event. In this case

method returns undefined.

Usage

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


31 of 49 10/15/2011 12:33 PM

x1 number

y1 number

x2 number

y2 number

x3 number

y3 number

Returns: number

// 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 abovevar paper = Raphael("notepad", 320, 200);// Image dumpvar 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"}]);

Returns angle between two or three points

Parameters

x coord of first point

y coord of first point

x coord of second point

y coord of second point

x coord of third point

y coord of third point

angle in degrees.

Creates an animation object that can be passed to the or methods. See also and

methods.

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

Raphael.animation(params, ms, [easing],

[callback])


32 of 49 10/15/2011 12:33 PM

params object

ms number

easing string

callback function

Returns: object

clr string

Returns: object

r number

g number

b number

hex string

error boolean

h number

s number

v number

l number

deg

Parameters



easing type. Accept one of or CSS format:



animation.

Parses the color string and returns object with all values for the given color.

Parameters

color string in one of the supported formats

(see )

Combined RGB & HSB object in format:

{

red,

green,

blue,

color in HTML/CSS format: #••••••,

true if string can’t be parsed,

hue,

saturation,

value (brightness),

lightness

}

Returns RFC4122, version 4 ID

Transform angle to degrees

Parameters

Raphael.color(clr)

Raphael.createUUID()

Raphael.deg(deg)


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

number

Returns: number

object

angle in radians

angle in degrees.

Object that contains easing formulas for animation. You could extend it with your

own. By default it has following list of easing:

“linear”

“<” or “easeIn” or “ease-in”

“>” or “easeOut” or “ease-out”

“<>” or “easeInOut” or “ease-in-out”

“backIn” or “back-in”

“backOut” or “back-out”

“elastic”

“bounce”

See also Easing demo.

You can add your own method to elements. This is usefull when you

want to hack default functionality or want to wrap some common

transformation or attributes in one method. In difference to canvas methods, you can

redefine element method at any time. Expending element methods wouldn’t affect

set.

Usage

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

Utility method Find dot coordinates on the given cubic bezier curve at the given t.

Raphael.easing_formulas

Raphael.el

Raphael.findDotsAtSegment(p1x, p1y, c1x,

c1y, c2x, c2y, p2x, p2y, t)


34 of 49 10/15/2011 12:33 PM

p1x number

p1y number

c1x number

c1y number

c2x number

c2y number

p2x number

p2y number

t number

Returns: object

x: number

y: number

x: number

y: number

x: number

y: number

x: number

y: number

x: number

y: number

alpha: number

object

Parameters

x of the first point of the curve

y of the first point of the curve

x of the first anchor of the curve

y of the first anchor of the curve

x of the second anchor of the curve

y of the second anchor of the curve

x of the second point of the curve

y of the second point of the curve

position on the curve (0..1)

point information in format:

{

x coordinate of the point

y coordinate of the point

m: {

x coordinate of the left anchor

y coordinate of the left anchor

}

n: {

x coordinate of the right anchor

y coordinate of the right anchor

}

start: {

x coordinate of the start of the curve

y coordinate of the start of the curve

}

end: {

x coordinate of the end of the curve

y coordinate of the end of the curve

}

angle of the curve derivative at the point

}

You can add your own method to the canvas. For example if you want

to draw a pie chart, you can create your own pie chart function and

ship it as a Raphaël plugin. To do this you need to extend the Raphael.fn object.

Please note that you can create your own namespaces inside the fn object —

Raphael.fn


35 of 49 10/15/2011 12:33 PM

token string

… string

Returns: string

methods will be run in the context of canvas anyway. You should alter the fn object

before a Raphaël instance is created, otherwise it will take no effect.

Usage

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

Simple format function. Replaces construction of type “{<number>}” to the

corresponding argument.

Parameters

string to format

rest of arguments will be treated as

parameters for replacement

formated 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));

Raphael.format(token, …)


36 of 49 10/15/2011 12:33 PM

token string

json object

Returns: string

value number

Returns: string

A little bit more advanced format function than . Replaces construction of type

“{<name>}” to the corresponding argument.

Parameters

string to format

object which properties will be used as a

replacement

formated 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']}z" x: 10, y: 20, dim: { width: 40, height: 50, "negative width": -40 }}));

On each call returns next colour in the spectrum. To reset it back to red call

Parameters

brightness, default is 0.75

hex representation of the colour.

Resets spectrum position for back to red.

Return coordinates of the point located at the given length on the given path.

Raphael.fullfill(token, json)

Raphael.getColor([value])

Raphael.getColor.reset()

Raphael.getPointAtLength(path, length)


37 of 49 10/15/2011 12:33 PM

path string

length number

Returns: object

x: number

y: number

alpha: number

colour string

Returns: object

r number

g number

b number

hex string

error boolean

Parameters

SVG path string

representation of the point:

{

x coordinate

y coordinate

angle of derivative

}

Parses colour string as RGB object

Parameters

colour string in one of formats:

Colour name (“red”, “green”, “cornflowerblue”, etc)

#••• — shortened HTML colour: (“#000”, “#fc0”, etc)

#•••••• — full length HTML colour: (“#000000”, “#bd2300”)

rgb(•••, •••, •••) — red, green and blue channels’ values:

(“rgb(200, 100, 0)”)

rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)

hsb(•••, •••, •••) — hue, saturation and brightness values:

(“hsb(0.5, 0.25, 1)”)

hsb(•••%, •••%, •••%) — same as above, but in %

hsl(•••, •••, •••) — same as hsb

hsl(•••%, •••%, •••%) — same as hsb

RGB object in format:

{

red,

green,

blue

color in HTML/CSS format: #••••••,

true if string can’t be parsed

}

Raphael.getRGB(colour)


38 of 49 10/15/2011 12:33 PM

path string

from number

to number

Returns: string

path string

Returns: number

h number

s number

b number

Returns: string

h number

s number

v number

Returns:

Return subpath of a given path from given length to given length.

Parameters

SVG path string

position of the start of the segment

position of the end of the segment

pathstring for the segment

Returns length of the given path in pixels.

Parameters

SVG path string.

length.

Converts HSB values to hex representation of the colour.

Parameters

hue

saturation

value or brightness


Converts HSB values to RGB object.

Parameters

hue

saturation

value or brightness

Raphael.getSubpath(path, from, to)

Raphael.getTotalLength(path)

Raphael.hsb(h, s, b)

Raphael.hsb2rgb(h, s, v)


39 of 49 10/15/2011 12:33 PM

object

r number

g number

b number

hex string

h number

s number

l number

Returns: string

h number

s number

l number

Returns: object

r number

g number

b number

hex string


{

red,

green,

blue,

color in HTML/CSS format: #••••••

}

Converts HSL values to hex representation of the colour.

Parameters

hue

saturation

luminosity


Converts HSL values to RGB object.

Parameters

hue

saturation

luminosity


{

red,

green,

blue,

color in HTML/CSS format: #••••••

}

Raphael.hsl(h, s, l)

Raphael.hsl2rgb(h, s, l)

Raphael.is(o, type)


40 of 49 10/15/2011 12:33 PM

o …

type string

Returns: boolean

a number

b number

c number

d number

e number

f number

Returns: object

Returns: object

Handfull replacement for typeof operator.

Parameters

any object or primitive

name of the type, i.e. “string”, “function”,

“number”, etc.

is given value is of given type

Utility method Returns matrix based on given parameters.

Parameters

If you want to leave no trace of Raphaël (Well, Raphaël creates only one global

variable Raphael, but anyway.) You can use ninja method. Beware, that in this

case plugins could stop working, because they are depending on global variable

existance.

Raphael object

Usage

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

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

Raphael.ninja()

Raphael.parsePathString(pathString)


41 of 49 10/15/2011 12:33 PM

pathString string array

Returns: array

TString string array

Returns: array


Returns: array


Returns: array

Utility method Parses given path string into an array of arrays of path segments.

Parameters

path string or array of segments

(in the last case it will be

returned straight away)

array of segments.

Utility method Parses given path string into an array of transformations.

Parameters

transform string or array of

transformations (in the last case

it will be returned straight away)

array of transformations.

Utility method Converts path to a new path where all segments are cubic bezier

curves.

Parameters


array of segments.

Utility method Converts path to relative form

Parameters


array of segments.

Raphael.parseTransformString(TString)

Raphael.path2curve(pathString)

Raphael.pathToRelative(pathString)


42 of 49 10/15/2011 12:33 PM

deg number

Returns: number

font object

Returns: object

r number

g number

b number

Returns: string

Transform angle to radians

Parameters

angle in degrees

angle in radians.

Adds given font to the registered set of fonts for Raphaël. Should be used as an

internal call from within Cufón’s font file. Returns original parameter, so it could be

used with chaining.

More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file.

Parameters

the font to register

the font you passed in

Usage

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

Converts RGB values to hex representation of the colour.

Parameters

red

green

blue


Converts RGB values to HSB object.

Raphael.rad(deg)

Raphael.registerFont(font)

Raphael.rgb(r, g, b)

Raphael.rgb2hsb(r, g, b)


43 of 49 10/15/2011 12:33 PM

r number

g number

b number

Returns: object

h number

s number

b number

r number

g number

b number

Returns: object

h number

s number

l number

newwin window

Parameters

red

green

blue

HSB object in format:

{

hue

saturation

brightness

}

Converts RGB values to HSL object.

Parameters

red

green

blue

HSL object in format:

{

hue

saturation

luminosity

}

Used when you need to draw in <iframe>. Switched window to the iframe one.

Parameters

new window object

Raphael.rgb2hsl(r, g, b)

Raphael.setWindow(newwin)

Raphael.snapTo(values, value, [tolerance])


44 of 49 10/15/2011 12:33 PM

values array number

value number

tolerance number

Returns: number

object

boolean

string

boolean

Snaps given value to given grid.

Parameters

given array of values or step of

the grid

value to adjust

tolerance for snapping. Default is 10.

adjusted value.

You can add your own method to elements and sets. It is wise to add

a set method for each element method you added, so you will be able

to call the same method on sets too. See also .

Usage

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

true if browser supports SVG.

Can be “SVG”, “VML” or empty, depending on browser support.

Raphael.st

Raphael.svg

Raphael.type

Raphael.vml


45 of 49 10/15/2011 12:33 PM

element object

Returns: boolean

callback function

thisArg object

Returns: object

Returns: object

true if browser supports VML.

Removeds all elements from the set

Removes given element from the set

Parameters

element to remove

true if object was found & removed from the

set

Executes given function for each element in the set.

If function returns false it will stop loop running.

Parameters

function to run

context object for the callback

Set object

Removes last element and returns it.

element

Set

Set.clear()

Set.exclude(element)

Set.forEach(callback, thisArg)

Set.pop()

Set.push()


46 of 49 10/15/2011 12:33 PM

Returns: object

index number

count number

insertion… object

Returns: object

name string

scope object

varargs ...

Returns: object

name string

Returns: array

Adds each argument to the current set.

original element

Removes given element from the set

Parameters

position of the deletion

number of element to remove

elements to insert

set elements that were deleted

Fires event with given name, given scope and other parameters.

Arguments

name of the event, dot (.) or slash (/)

separated

context for the event handlers

the rest of arguments will be sent to event

handlers

array of returned values from the listeners

Internal method which gives you array of all event handlers that will be triggered by

the given name.

Arguments


separated

array of event handlers

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

eve(name, scope, varargs)

eve.listeners(name)


47 of 49 10/15/2011 12:33 PM

subname string

Returns: string

Returns: boolean

name string

f function

Returns: function

Could be used inside event handler to figure out actual name of the event.

Arguments

subname of the event

name of the event, if subname is not specified

or

true, if current event’s name contains

subname

Binds given event handler with a given name. You can use wildcards “*” for the

names:

eve.on("*.under.*", f);eve("mouse.under.floor"); // triggers f

Use to trigger the listener.

Arguments


separated, with optional wildcards

event handler function

returned function accept one number

parameter that represents z-index of the handler. It is optional feature and only used

when you need to ensure that some subset of handlers will be invoked in a given

order, despite of the order of assignment.

Example:

eve.on("mouse", eat)(2);eve.on("mouse", scream);eve.on("mouse", catch)(1);

This will ensure that catch function will be called before eat. If you want to put you

hadler before not indexed handlers specify negative value. Note: I assume most of

eve.nt([subname])

eve.on(name, f)


48 of 49 10/15/2011 12:33 PM

name string

f function

string

the time you don’t need to worry about z-index, but it’s nice to have this feature “just

in case”.

Is used inside event handler to stop event

Removes given function from the list of event listeners assigned to given name.

Arguments


separated, with optional wildcards

event handler function

Current version of the library.

eve.stop()

eve.unbind(name, f)

eve.version


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

raphael js

Documents