Animation
Animation.delay()
Animation.repeat()
Element
Element.animate()
Element.clone()
Element.getBBox()
Element.getPointAtLength()
Element.getSubpath()
Element.getTotalLength()
Element.glow()
Element.rotate()
Element.scale()
Element.setTime()
Element.status()
Element.transform()
Element.translate()
Paper
Paper.bottom
Paper.circle()
Paper.ellipse()
Paper.forEach()
Paper.getById()
Paper.getElementByPoint()
Paper.image()
Paper.path()
Paper.raphael
Paper.rect()
Paper.set()
Paper.setSize()
Paper.text()
Paper.top
Raphael()
Raphael.angle()
Raphael.animation()
Raphael.deg()
Raphael.easing_formulas
Raphael.findDotsAtSegment()
Raphael.fn
Raphael.getColor()
Raphael.getColor.reset()
Raphael.getPointAtLength()
Raphael.getRGB()
Raphael.getSubpath()
Raphael.getTotalLength()
Raphael.hsb()
Raphael.hsb2rgb()
Raphael.hsl()
Raphael.hsl2rgb()
Raphael.is()
Raphael.parsePathString()
Raphael.parseTransformString()
Raphael.path2curve()
Raphael.pathToRelative()
Raphael.rad()
Raphael.rgb()
Raphael.rgb2hsb()
Raphael.rgb2hsl()
Raphael.setWindow()
Raphael.snapTo()
Raphael.svg
Raphael.type
Raphael.vml

Raphaël Reference

Check out the source: raphael.js

Animation⚓➭

Animation.delay(delay)⚓➭

Creates copy of existing animation object with given delay.

delay: number; number of ms to pass between animation start and actual animation

Returns: object new altered Animation object

Animation.repeat(repeat)⚓➭

Creates copy of existing animation object with given repetition.

repeat: number; number iterations of animation. For infinite animation pass Infinity

Returns: object new altered Animation object

Element⚓➭

Element.animate(…)⚓➭

Creates and starts animation for given element.

params: object; final attributes for the element, see also Element.attr
ms: number; number of milliseconds for animation to run
easing: optional; string; easing type. Accept on of Raphael.easing_formulas or CSS format: cubic-bezier(XX, XX, XX, XX)
callback: optional; function; callback function. Will be called at the end of animation.

animation: object; animation object, see Raphael.animation

Returns: object original element

Element.clone()⚓➭

Returns: object clone of a given element

Element.getBBox(isWithoutTransform)⚓➭

Return bounding box for a given element

isWithoutTransform: boolean; flag, true if you want to have bounding box before transformations. Default is false.

Returns: object Bounding box object:

{
    x: //top left corner x,
    y: //top left corner y,
    width: //width,
    height: //height
}

Element.getPointAtLength(length)⚓➭

Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.

length: number

Returns: object representation of the point:

{
    x: //x coordinate,
    y: //y coordinate,
    alpha: //angle of derivative
}

Element.getSubpath(from, to)⚓➭

Return subpath of a given element from given length to given length. Only works for element of “path” type.

from: number; position of the start of the segment
to: number; position of the end of the segment

Returns: string pathstring for the segment

Element.getTotalLength()⚓➭

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

Returns: number length.

Element.glow()⚓➭

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

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

Returns: object set of elements that represents glow

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

Adds rotation by given angle around given point to the list oftransformations of the element.

deg: number; angle in degrees
cx: optional; number; x coordinate of the centre of rotation
cy: optional; number; y coordinate of the centre of rotation

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

Returns: object Element

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

Adds scale by given amount relative to given point to the list oftransformations of the element.

sx: number; horisontal scale amount
sy: number; vertical scale amount
cx: optional; number; x coordinate of the centre of scale
cy: optional; number; y coordinate of the centre of scale

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

Returns: object Element

Element.setTime(anim, value)⚓➭

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

anim: object; animation object
value: number; number of milliseconds from the beginning of the animation

Returns: object original element if value is specified

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

Gets or sets the status of animation of the element.

anim: optional; object; animation object
value: optional; number; 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.

Returns: number status

Returns: array status if anim is not specified in format:

[{
    anim: // animation object,
    status: // status
}, {
    anim: // animation object,
    status: // status
}, ...]

Returns: object original element if value is specified

Element.transform([tstr])⚓➭

Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change x or y of the rectange. The formatof 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 forscale and m is for matrix.

So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.

tstr: optional; string; transformation string

If tstr isn’t specified

Returns: string current transformation string

else

Returns: object Element

Element.translate(dx, dy)⚓➭

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

dx: number; horisontal shift
dy: number; vertical shift

Returns: object Element

Paper⚓➭

Paper.bottom⚓➭

Points to the bottom element on the paper

Paper.circle(x, y, r)⚓➭

Draws a circle.

x: number; x coordinate of the centre
y: number; y coordinate of the centre
r: number; radius

Returns: object Raphaël element object with type “circle”

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

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

Draws an ellipse.

x: number; x coordinate of the centre
y: number; y coordinate of the centre
rx: number; horisontal radius
ry: number; vertical radius

Returns: object Raphaël element object with type “ellipse”

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

Paper.forEach(callback, thisArg)⚓➭

Executes given function for each element on the paper

If function returns false it will stop loop running.

callback: function; function to run
thisArg: object; context object for the callback

Returns: object Paper object

Paper.getById(id)⚓➭

Returns you element by it’s internal ID.

id: number; id

Returns: object Raphaël element object

Paper.getElementByPoint(x, y)⚓➭

Returns you topmost element under given point.

Returns: object Raphaël element object

x: number; x coordinate from the top left corner of the window
y: number; y coordinate from the top left corner of the window

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

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

Embeds an image into the surface.

src: string; URI of the source image
x: number; x coordinate position
y: number; y coordinate position
width: number; width of the image
height: number; height of the image

Returns: object Raphaël element object with type “image”

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

Paper.path(pathString)⚓➭

Creates a path element by given path data string.

pathString: string; path data in SVG path string format.

Returns: object Raphaël element object with type “ellipse”

Details of a path's data attribute's format are described in the SVG specification.

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

Paper.raphael⚓➭

Points to the Raphael object/function

Paper.rect(x, y, width, height, r)⚓➭

Draws a rectangle.

x: number; x coordinate of the top left corner
y: number; y coordinate of the top left corner
width: number; width
height: number; height
r: number; optional radius for rounded corners, default is 0

Returns: object Raphaël element object with type “rect”

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

Paper.set()⚓➭

Creates array-like object to keep and operate couple of elements at once.Warning: it doesn’t create any elements for itself in the page.

Returns: object array-like object that represents set of elements

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

Paper.setSize(width, height)⚓➭

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

width: number; new width of the canvas
height: number; new height of the canvas

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

Paper.text(x, y, text)⚓➭

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

x: number; x coordinate position
y: number; y coordinate position
text: string; The text string to draw

Returns: object Raphaël element object with type “text”

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

Paper.top⚓➭

Points to the topmost element on the paper

Raphael(…)⚓➭

Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.

container: HTMLElement string; DOM element or it’s id which is going to be a parent for drawing surface
width: number
height: number

x: number
y: number
width: number
height: number

all: array; (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>})

onReadyCallback: function; 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.

Returns: object Paper

// 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);
// 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])⚓➭

Returns angle between two or three points

x1: number; x coord of first point
y1: number; y coord of first point
x2: number; x coord of second point
y2: number; y coord of second point
x3: optional; number; x coord of third point
y3: optional; number; y coord of third point

Returns: number angle in degrees.

Raphael.animation(params, ms, [easing], [callback])⚓➭

Creates animation object. That later could be used for Element.animate or Element.animateWith methods.See also Animation.delay and Animation.repeat methods.

params: object; final attributes for the element, see also Element.attr
ms: number; number of milliseconds for animation to run
easing: optional; string; easing type. Accept one of Raphael.easing_formulas or CSS format: cubic-bezier(XX, XX, XX, XX)
callback: optional; function; callback function. Will be called at the end of animation.

Returns: object Animation

Raphael.deg(deg)⚓➭

Transform angle to degrees

deg: number; angle in radians

Returns: number angle in degrees.

Raphael.easing_formulas⚓➭

Object that contains easing formulas for animation. You could extend it with your owns. 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”

Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭

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

p1x: number; x of the first point of the curve
p1y: number; y of the first point of the curve
c1x: number; x of the first anchor of the curve
c1y: number; y of the first anchor of the curve
c2x: number; x of the second anchor of the curve
c2y: number; y of the second anchor of the curve
p2x: number; x of the second point of the curve
p2y: number; y of the second point of the curve
t: number; position on the curve (0..1)

Returns: object point information in format:

{
    x: // x coordinate of the point,
    y: // y coordinate of the point,
    m: {
        x: // x coordinate of the left anchor,
        y: // y coordinate of the left anchor
    },
    n: {
        x: // x coordinate of the right anchor,
        y: // y coordinate of the right anchor
    },
    start: {
        x: // x coordinate of the start of the curve,
        y: // y coordinate of the start of the curve
    },
    end: {
        x: // x coordinate of the end of the curve,
        y: // y coordinate of the end of the curve
    },
    alpha: // angle of the curve derivative at the point.
}

Raphael.fn⚓➭

object

You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend Raphael.fn object. Please note that you can create your own namespacesinside fn object. Methods will be run in context of canvas anyway. You should alter fnobject before Raphaël instance was created, otherwise it will take no effect.

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.getColor([value])⚓➭

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

value: optional; number; brightness, default is 0.75

Returns: string hex representation of the colour.

Raphael.getColor.reset()⚓➭

Resets spectrum position for Raphael.getColor back to red.

Raphael.getPointAtLength(path, length)⚓➭

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

path: string; SVG path string
length: number

Returns: object representation of the point:

{
    x: //x coordinate,
    y: //y coordinate,
    alpha: //angle of derivative
}

Raphael.getRGB(colour)⚓➭

Parses colour string as RGB object

colour: string; colour string in one of formats:

Returns: object RGB object in format:

{
    r: // red,
    g: // green,
    b: // blue
    hex: // color in HTML/CSS format: #••••••,
    error: // true if string can’t be parsed
}

Raphael.getSubpath(path, from, to)⚓➭

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

path: string; SVG path string
from: number; position of the start of the segment
to: number; position of the end of the segment

Returns: string pathstring for the segment

Raphael.getTotalLength(path)⚓➭

Returns length of the given path in pixels.

path: string; SVG path string.

Returns: number length.

Raphael.hsb(h, s, b)⚓➭

Converts HSB values to hex representation of the colour.

h: number; hue
s: number; saturation
b: number; value or brightness

Returns: string hex representation of the colour.

Raphael.hsb2rgb(h, s, v)⚓➭

Converts HSB values to RGB object.

h: number; hue
s: number; saturation
v: number; value or brightness

Returns: object RGB object in format:

{
    r: // red,
    g: // green,
    b: // blue
    hex: // color in HTML/CSS format: #••••••
}

Raphael.hsl(h, s, l)⚓➭

Converts HSL values to hex representation of the colour.

h: number; hue
s: number; saturation
l: number; luminosity

Returns: string hex representation of the colour.

Raphael.hsl2rgb(h, s, l)⚓➭

Converts HSL values to RGB object.

h: number; hue
s: number; saturation
l: number; luminosity

Returns: object RGB object in format:

{
    r: // red,
    g: // green,
    b: // blue
    hex: // color in HTML/CSS format: #••••••
}

Raphael.is(o, type)⚓➭

Handfull replacement for typeof operator.

o: …; any object or primitive
type: string; name of the type, i.e. “string”, “function”, “number”, etc.

Returns: boolean is given value is of given type

Raphael.parsePathString(pathString)⚓➭

Utility methodParses given path string into an array of arrays of path segments.

pathString: string array; path string or array of segments (in the last case it will be returned stright away)

Returns: array array of segments.

Raphael.parseTransformString(TString)⚓➭

Utility methodParses given path string into an array of transformations.

TString: string array; transform string or array of transformations (in the last case it will be returned stright away)

Returns: array array of transformations.

Raphael.path2curve(pathString)⚓➭

Utility methodConverts path to path where all segments are cubic bezier curves.

pathString: string array; path string or array of segments

Returns: array array of segments.

Raphael.pathToRelative(pathString)⚓➭

Utility methodConverts path to relative form

pathString: string array; path string or array of segments

Returns: array array of segments.

Raphael.rad(deg)⚓➭

Transform angle to radians

deg: number; angle in degrees

Returns: number angle in radians.

Raphael.rgb(r, g, b)⚓➭

Converts RGB values to hex representation of the colour.

r: number; red
g: number; green
b: number; blue

Returns: string hex representation of the colour.

Raphael.rgb2hsb(r, g, b)⚓➭

Converts RGB values to HSB object.

r: number; red
g: number; green
b: number; blue

Returns: object HSB object in format:

{
    h: // hue,
    s: // saturation,
    b: // brightness
}

Raphael.rgb2hsl(r, g, b)⚓➭

Converts RGB values to HSL object.

r: number; red
g: number; green
b: number; blue

Returns: object HSL object in format:

{
    h: // hue,
    s: // saturation,
    l: // luminosity
}

Raphael.setWindow(newwin)⚓➭

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

newwin: window; new window object

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

Snaps given value to given grid.

values: array number; given array of values or step of the grid
value: number; value to adjust
tolerance: optional; number; tolerance for snapping. Default is 10.

Returns: number adjusted value.

Raphael.svg⚓➭

boolean

true if browser supports SVG.

Raphael.type⚓➭

string

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

Raphael.vml⚓➭

boolean

true if browser supports VML.