Categories
Vector Graphics for the Web

Vector Graphics with RaphaelJS

RaphaelJS is a JavaScript library that provides an API for manipulating SVG, and SVG support for Internet Explorer. It achieves the latter by emulating SVG in Internet Explorer using VML.

SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.

Setup

RaphaelJS is a JavaScript library so setting it up requires simply connecting to it in your code by linking to it.

The code below will draw a circle of radius 50 pixels at point (50, 50).

<html>
	<head>
		<title>Circle</title>
	</head>
	<body>
		<div id="container"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
		<script>
			paper = Raphael('container', 100, 100);
			var circle = paper.circle(50, 50, 25);
		</script>
	</body>
</html>

<div id=”container”> contains a div element that the library will be drawing in.

paper = Raphael(‘container’, 100, 100); 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.

The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things.

var circle = paper.circle(50, 50, 25); creates a RaphaelJS SVG object inside the thing with id=”container” that is a circle which is 50 pixels from the top and left of the paper.

RaphaelJS Elements

RaphaelJS supports 3 kinds of elements: shapes, images and text. This article will cover how to draw shapes in RaphaelJS.

After you create your paper object, in order to work with Raphael elements, you must:

  1. Create a RaphaelJS element
  2. Manipulate the style of the element
  3. Add events to the element using JavaScript

Drawing a Circle

The code to draw a circle from the RaphaelJS documentation is Paper.circle(x, y, r) where x is the x coordinate of the circle, y is the y coordinate of the circle and r is the radius.

The code in the Setup section above already shows how to draw a circle of radius 25 at the point 50, 50 of the paper.

To add attributes to the circle is trivial. To draw a red circle with a black stroke, we use the code shown below:

<script>
	paper = Raphael('container', 100, 100);
	var circle = paper.circle(50, 50, 25);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	circle.attr(attributes);
</script>

The generated image is shown below:

Circle
Circle with a Black Border

Drawing an Ellipse

The code to draw an ellipse from the RaphaelJS documentation is Paper.ellipse(x, y, rx, ry) where x is the x coordinate of the centre, y is the y coordinate of the centre, rx is the horizontal radius and ry is the vertical radius.

The code to draw an ellipse is shown below:

<script>
	paper = Raphael('container', 100, 100);
	var ellipse = paper.ellipse(50, 50, 40, 20);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	ellipse.attr(attributes);
</script>

The generated ellipse is shown below:

Ellipse
Ellipse with a Black Border

Drawing a Rectangle

The code to draw a rectangle from the RaphaelJS documentation is Paper.rect(x, y, width, height, [r]) where x is the x coordinate of the top left corner, y is the y coordinate of the top left corner, width is the width of the rectangle and height is the height of the rectangle.

[r] is optional and is for the radius of the rectangle if it would have rounded corners.

<script>
	paper = Raphael('container', 100, 100);
	var rectangle = paper.rect(10, 10, 50, 50);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	rectangle.attr(attributes);
</script>

The generated rectangle is shown below:

Rectangle
Rectangle with a Black Border

Conclusion

The RaphaelJS library is a very versatile library for drawing in the browser. Since its’ release in 2008, it has gone on to become a simple library for creating vector graphics in the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *