Set the background color of the canvas.

Parameters

color

Color of backgound

Sample

canvas.background("LightGrey");

Set the size of the canvas.

Parameters

w

Weight

h

Height

Sample

canvas.size(100,600);

Create a circle.

Parameters

x

Coordinate X of center

y

Coordinate Y of center

r

Radius

s

Start angle in degree

e

End angle in degree

Sample

var circle = canvas.circle(70, 70, 40, 0, 360);

Create a line.

Parameters

s_x

Coordinate X of start point

s_y

Coordinate Y of start point

e_x

Coordinate Y of end point

e_y

Coordinate Y of end point

Sample

var line1 = canvas.line(40, 20, 40, 120);
var line2 = canvas.line(40, 120, 100, 20);
var line3 = canvas.line(100, 20, 100, 120);

Create a rectangle.

Parameters

x

Coordinate X of center

y

Coordinate Y of center

w

Weight

h

Height

Sample

var rect = canvas.rect(20, 20, 40, 40);

Draw a path according to W3C SVG Path specifiation.

Attention Chaining curve is not working properly.

Parameters

path

SVG Path expression

Sample (http://raphaeljs.com/icons/)

var path = canvas.path("M17.078,22.004l-1.758-4.129l-2.007,4.752l-7.519-3.289l0.174,3.905l9.437,4.374l10.909-5.365l-0.149-4.989L17.078,22.004zM29.454,6.619L18.521,3.383l-3.006,2.671l-3.091-2.359L1.546,8.199l3.795,3.048l-3.433,5.302l10.879,4.757l2.53-5.998l2.257,5.308l11.393-5.942l-3.105-4.709L29.454,6.619zM15.277,14.579l-9.059-3.83l9.275-4.101l9.608,3.255L15.277,14.579z");

Draw text.

Parameters

x

Coordinate X of center

y

Coordinate Y of center

str

Text to draw

Sample

canvas.text(20, 60, "Hello");
canvas.text(30, 100, "World!");

Create a layer used to do actions on a group of shapes.

x

Coordinate X of center

y

Coordinate Y of center

w

Weight

h

Height

Sample

layer = canvas.layer(0, 0, 200, 200);
layer.rect(40, 40, 60, 60).attribute(style);
layer.rect(80, 80, 60, 60).attribute(style);
layer.translate(10,10); Run

When new objects are created, they are not display immediatly. You need to refresh the canvas with a call to repaint.

Sample

canvas.text(0, 40, "Hello");
canvas.repaint(); Run

Clean the canvas.

Sample

canvas.text(20, 40, "Clean Me!");
canvas.clear(); Run

Run an animation. In the animation function, repaint is automatically called.

Sample

var circle = canvas9.circle(50, 70, 30, 0, 360).attribute(style);
var deltax = deltay = 1;						
var anim = canvas9.anim(function() {
  circle.attr.x += deltax;
  circle.attr.y += deltay;
  if(circle.attr.x>105) deltax = -deltax;
  if(circle.attr.x<35) deltax = -deltax;
  if(circle.attr.y>105) deltay = -deltay;
  if(circle.attr.y<35) deltay = -deltay;
});

Remove an object from canvas

Parameters

obj

Object to remove

Sample

circle = canvas.circle(50, 50, 30, 0, 360);
canvas.remove(circle); run
canvas.repaint();

Execute a function for each elements contained in the canvas.

Parameters

fun

Function to execute. The obj argument is passed.

Sample

canvas.forEach(function(obj) {
  document.getElementById("output").innerHTML += 'A Circle!';
}, "circle");

Output:

Translate the object on the canvas from its position.

Attention This do not change the coordinates.

Parameters

x

Value of the X translation

y

Value of the X translation

Sample

circle = canvas.circle(50, 50, 30, 0, 360);
circle.translate(10,10); run
canvas.repaint();

Rotate the object on the canvas.

Attention This do not change the angle of the object.

Parameters

angle

Angle in degree

Sample

rect = canvas.rect(40, 40, 60, 60).attribute(style);
rect.rotate(45); run
canvas.repaint();

Scale the object on the canvas.

Parameters

x

Scaling value for X coordinates

y

Scaling value for Y coordinates

Sample

rect = canvas.rect(40, 40, 60, 60);
rect.scale(1, 2); run
canvas.repaint();

Execute the function when click mouse is down.

Parameters

fun

Function to execute.

Sample (click on the circle)

circle = canvas.circle(50, 50, 30, 0, 360);
circle.onMouseDown(function(){
    document.getElementById("output").innerHTML += "Down! ";
});	
				   

Output:

Execute the function when mouse is over the object

Parameters

fun

Function to execute

Sample

circle = canvas.circle(50, 50, 30, 0, 360);
circle.onMouseOver(function(){
	document.getElementById("output").innerHTML += "Over! ";
});

Output:

Set attributes of the shape.

Parameters

fillStyle

Represents the color or style to use inside shapes.

strokeStyle

Represents the color or style to use for the lines around the shapes.

lineWidth

Width of lines, in coordinate space units.

lineCap

Type of line ending (butt, round, and square)

lineJoin

Type of corners when two lines meet.

globalAlpha

Transparency of the shape (0.0 to 1.0)

globalCompositeOperation

Composition Operation to performe

shadowColor

Color of the shadow

shadowBlur

Level of the blurring effect

shadowOffsetX

Horizontal distance that the shadow will be offset

shadowOffsetY

Vertical distance that the shadow will be offset

angle

Angle of the shape

stroke

Shape stroke status

fill

Shape fill status

visible

Visibility of the shape

Sample

rect = canvas.rect(25, 25, 50, 50);
rect.attribute({globalAlpha:0.5})
canvas.repaint();

Create an animation from an Attribute of the object.

Parameters

parameters

Array of attribute:endValue

step

Value of each step.

Sample

rect = canvas.rect(40, 40, 60, 60);
rect.transition({globalAlpha:0.01}, 0.01);Run	
...	
rect.transition({globalAlpha:1}, 0.01);Run