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.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
You use this library via the globally available {@link RaphaelStatic|Raphael} object:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
DOM element or its ID which is going to be a parent for drawing surface.
Width for the canvas.
Height for the canvas.
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
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.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
You use this library via the globally available {@link RaphaelStatic|Raphael} object:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
x coordinate of the viewport where the canvas is created.
y coordinate of the viewport where the canvas is created.
Width for the canvas.
Height for the canvas.
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
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.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
You use this library via the globally available {@link RaphaelStatic|Raphael} object:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
Interface for the main object exported by the Raphaël library.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
You use this library via the globally available {@link RaphaelStatic|Raphael} object:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
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 the method returns undefined.
A new raphael paper that can be used for drawing shapes to the canvas.
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.
DOM element or its ID which is going to be a parent for drawing surface.
Width for the canvas.
Height for the canvas.
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
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.
x coordinate of the viewport where the canvas is created.
y coordinate of the viewport where the canvas is created.
Width for the canvas.
Height for the canvas.
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
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.
Callback function which is going to be executed in the context of newly created paper.
A new raphael paper that can be used for drawing shapes to the canvas.
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 the method returns undefined.
A new raphael paper that can be used for drawing shapes to the canvas.
Object that contains easing formulas for animation. You could extend it with your own. By default it has the easing methods as defined in RaphaelBuiltinEasingFormula.
You can add your own method to elements. This is useful when you want to hack default functionality or want to wrap some common transformation or attributes in one method. In contrast to canvas methods, you can redefine element method at any time. Expending element methods would not affect set.
Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
// then use it
paper.circle(100, 100, 20).red();
Note to TypeScript users
To declare your plugin, you should extend the raphael module and add to the RaphaelElement:
import { RaphaelElement } from "raphael"
declare module "raphael" {
interface RaphaelElement {
red(): void;
colored(r: number, g: number, b: number): this;
}
}
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, methods will be run in the context of the canvas. You should alter the fn object before a Raphaël instance is 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();
Note to TypeScript users
To declare your plugin, you should extend the raphael module and add to the RaphaelPaper:
import { RaphaelPaper, RaphaelPath } from "raphael"
declare module "raphael" {
interface RaphaelPaper {
arrow(x1: number, y1: number, x2: number, y2: number, size: number): RaphaelPath;
mystuff: {
arrow(flag: boolean): number;
star(): void;
};
}
}
On each call returns next colour in the spectrum. Also contains a utility method to reset it back to red via Raphael.getColor.reset
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 el.
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();
Note to TypeScript users
To declare your plugin, you should extend the raphael module and add to the RaphaelSet:
import { RaphaelSet } from "raphael"
declare module "raphael" {
interface RaphaelSet {
green(): void;
colorized(r: number, g: number, b: number): this;
}
}
true if browser supports SVG (scalable vector graphics), or false otherwise.
The technology used by Raphaël for the graphics.
True if browser supports VML (vector markup language).
Returns angle between two or three points
x coordinate of first point
y coordinate of first point
x coordinate of second point
y coordinate of second point
x coordinate of third point
y coordinate of third point
The angle in degrees.
Creates an animation object that can be passed to the RaphaelElement.animate or RaphaelElement.animateWith methods. See also the RaphaelAnimation.delay and RaphaelAnimation.repeat methods.
Number of milliseconds for animation to run
easing type. Accept one of RaphaelStatic.easing_formulas or CSS format:
cubic‐bezier(XX, XX, XX, XX)
Callback function. Will be called at the end of animation.
Parses the color string and returns object with all values for the given color.
Color string in one of the supported formats, see RaphaelStatic.getRGB.
Combined RGB & HSB object with the information about the color.
Transform angle from radians to degrees.
An angle in radians.
The given angle in degrees.
Utility method to find dot coordinates on the given cubic bezier curve at the given position.
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, between 0 and 1.
The point at the specified cubic bezier curve at the given position.
Simple format function. Replaces construction of type {<number>} with the corresponding argument.
var x = 10;
var y = 20;
var width = 40;
var 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));
See also format.
String to format.
Arguments that will be treated as parameters for replacement. They will be coerced to type
string.
The formatted string.
A little bit more advanced format function than format. Replaces construction of type {<name>}
with the corresponding argument.
// 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
}
}));
String to format.
Object with properties that will be used as a replacement.
The formatted string.
Return coordinates of the point located at the given length on the given path.
SVG path string.
Length at which to get the point.
The point located at the given length on the given path.
Parses a color string as an RGB object. Takes a color string in one of the following formats:
red, green, cornflowerblue, etc)#RGB - shortened HTML colour: (#000, #fc0, etc)#RRGGBB - full length HTML colour: (#000000, #bd2300)rgb(RRR, GGG, BBB) - red, green and blue channels' values: (rgb(200, 100, 0))rgb(RRR%, GGG%, BBB%) - same as above, but in %: (rgb(100%, 175%, 0%))hsb(HHH, SSS, BBB) - hue, saturation and brightness values: (hsb(0.5, 0.25, 1))hsb(HHH%, SSS%, BBB%) - same as above, but in %hsl(HHH, SSS, LLL) - same as hsbhsl(HHH%, SSS%, LLL%) - same as hsbColor string to be parsed.
The RGB components of the parsed color string.
Return sub path of a given path from given length to given length.
SVG path string
Position of the start of the segment
Position of the end of the segment
Path string for the segment.
Returns length of the given path in pixels.
SVG path string.
The length of the path.
Converts HSB values to hex representation of the color.
Hue channel
Saturation channel.
Brightness channel.
Hex representation of the color.
Converts HSB values to RGB object.
Hue channel.
Saturation channel.
Brightness channel.
The color in the RGB color system.
Converts HSL values to hex representation of the colour.
Hue channel.
Saturation channel.
Luminosity channel.
Hex representation of the color.
Converts HSL values to RGB object.
Hue channel.
Saturation channel.
Luminosity channel.
The color in the RGB color system.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check.
true if the object is of the given type, or false otherwise.
Handy replacement for typeof operator.
An object whose type to check.
Type to check for.
true if the object is of the given type, or false otherwise.
Returns true if two bounding boxes intersect
first bounding box
second bounding box
true if they intersect
Returns true if given point is inside the bounding box.
bounding box
x coordinate of the point
y coordinate of the point
true if point the point is inside
Utility method for creating a 2x3 matrix based on given parameters:
+---+---+---+
| a | c | e |
| b | d | f |
+---+---+---+
The matrix component at the first row, first column.
The matrix component at the second row, first column.
The matrix component at the first row, second column.
The matrix component at the second row, second column.
The matrix component at the third row, first column.
The matrix component at the third row, second column.
A matrix based on the given 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 the existence of the global variable.
The Raphael object with all available methods.
Utility method that parses given path string into an array of arrays of path segments.
Path string or array of segments (in the last case it will be returned straight away).
Array of path segments.
Utility method that parses given path string into an array of transformations.
Transform string or array of transformations (in the last case it will be returned straight away).
Array of transformations.
Utility method that converts path to a new path where all segments are cubic bezier curves.
A path string or array of segments.
Array of path segments.
Utility method that converts a path to its relative form.
A path string or array of segments.
Array of path segments.
Transform angle from degrees to radians.
An angle in degrees.
The given 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.
The font to register.
The font you passed in
Converts RGB values to hex representation of the colour.
The red channel.
The green channel.
The blue channel.
Hex representation of the color.
Converts RGB values to HSB values.
The red channel.
The green channel.
The blue channel.
The given color in the HSB color format.
Converts RGB values to HSB values.
The red channel.
The green channel.
The blue channel.
The given color in the HSL color format.
Used when you need to draw in IFRAME. Switches window to the iframe one.
The new window object
Snaps the given value to the given grid.
Array of grid values or step of the grid.
Value to adjust.
Tolerance for snapping. Default is 10.
The adjusted value.
Generated using TypeDoc
The target RaphaelTechnology.