Vector Graphics with RaphaelJS

Renegade Knight
Sep 5 · 4 min read
Image for post
Image for post
Photo by Tobias Tullius on Unsplash

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, 50);
</script>
</body>
</html>

<div id=”container”></div> 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

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:

Image for post
Image for post
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:

Image for post
Image for post
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:

Image for post
Image for post
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.

JavaScript In Plain English

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store