Doing some SVG drawings on a web page (Raphael.js)

So for this tree based problem that i am currently trying to solve, one of the first perquisites was to get better at Recursion, the next thing to work out was, how do I draw shapes and lines on an HTML page?

So prior to this my only experience with drawing on an HTML page was this simple badly presented snake game that i had created using the canvas. Anyway for this little project i decided to look around for some libraries that would allow me to draw some shapes and I found a couple of libraries such as Raphel.js and D3.js that would let me draw SVG shapes on a web page. After very briefly investigating them, it seemed that Raphaeljs would be a better fit for my problem and hence i began my SVG drawing journey with Raphael.

Now when i think about this problem, i can think of it as a sequential list of little sub-problems that i need to individually solve before i can build my great grand tree drawing solution. This is a slightly larger problem and hence it will be spread out over a few posts. Anyway below is a break of all the sub-problems

1. Find a library that lets you draw shapes
2. Draw some basic shapes and lines with the library. 
3. Add some user interactivity by making the shapes drag-able across the drawing area.
4. Connect the shapes by drawing lines between them and ensure that the connections are maintained even when the shapes are dragged.
5. Draw a relatively large tree and ensure the nodes do not overlap.
6. Polish the product by adding, the ability to edit the text in the shapes, or perhaps let the users add shapes to the canvas.

So No 1. is already solved in this post and in that i have found Raphael.js, which will let me draw some shapes on the web page.

Problem

Draw some basic shapes on a web page.

Solution

So the first thing to do was to get a the container on the web page where i would do all my drawings. A container is a div like this.   <div id="canvas_container"> </div>. 

    var paper = Raphael(document.getElementById('canvas_container'), 1200, 900);
    var r1 = paper.rect(200, 200, 120, 50).attr("fill", "#ff0");
    var c1 = paper.circle(50,50, 40).attr("fill", "#ff0");

The above code first gets the drawing area through the Raphael object and then uses the methods provided by Raphaeljs to draw a rectangle and a circle. The rectangle drawing starts at x, and y of 200 with a width of 120 and height of 50  respectively. The circle starts at x, and y position of 50 and has a radius of 40. Both the circle and the rectangle will be coloured yellow by setting their fill attribute i.e. .attr("fill", "#ff0"). Now both the rectangle and circle looks a little empty and boring, so i decided to add some rounded corners and some text in the center of it.

    var r1 = paper.rect(200, 200, 120, 50).attr("fill", "#ff0");
    var c1 = paper.circle(50,50, 40).attr("fill", "#ff0");
    /* get the bounding box of the object, to get the start and the end co-ordinates of the shape */
     var rBox = r1.getBBox();
     var cBox = c1.getBBox();
     /*calculate the midpoint(x, y) co-ordinates of the shape where the text has to be placed */
     var rMidpointX = (rBox.x + rBox.x2)/2;
     var rMidpointY = (rBox.y + rBox.y2)/2;
     var cMidpointX = (cBox.x + cBox.x2)/2;
     var cMidpointY = (cBox.y + cBox.y2)/2;
     /* draw the text at the center of the objects  */
     var t1 = paper.text(rMidpointX, rMidpointY, "Box 1");
     var t2 = paper.text(cMidpointX, cMidpointY, "Circle 1");
     /*style the text that was added */          
     t1.attr({fill: "#3D5C9D", "font-weight": "bold", "font-size":"12"});
     t2.attr({fill: "#3D5C9D", "font-weight": "bold", "font-size":"12"});

The above example with the comments is fairly self-explanatory and  the comments placed in there should provide a clear understanding of what each line does.

Ok, the next thing i thought of was hmm, i may need to draw custom shapes, so how do i go about doing it? thankfully this can be done using Paths in Raphael.

var path = paper.path("M300,300 L340,300 L340,340 L300,340z")

M300,300,  the point at which the line drawing starts i.e. synonymous to the point of the paper where the pencil is placed before anything is drawn. L340,300, draw a line to point 340,300 and move the draw cursor to that point, L340,340 draw a line down from the previous point followed by L300,340. So syntactically, a letter (M, L) indicates what is to be done and is generally followed by the direction to do it in i.e. x and y co-ordinates. Z  this is a special case as it simply means close the drawing i.e. draw a line back to the point where we started from i.e. M.  When debugging drawings, i drew some small circles to visualise where each point was , something like this

                paper.circle(300,300,2);
                paper.circle(340,300,2);
                paper.circle(300,340,2);
                paper.circle(340,340,2);

Ok so this should be all for basic shape drawing for now, and in the next post i will talk about how to make the shapes draggable and draw paths to link these shapes.
Some useful references for Raphael.js

Introduction to Raphael.js
Raphaeljs tutorial
Raphael.js documentation