What is the correct way to draw straight lines using raphael.js?

Question

I'm having trouble drawing a simple grid using raphael.js.

I'm using paper.path(), and everything looks fine with my path strings :

but somehow this gets rendered :

here's the code I'm using to render this "grid"

    // vertical lines
    for(var x = (this._offset.x % cellSize); x < this.width; x += cellSize){
        var vpath = "M " + x + " 0 l " + x + " " + this.height + " z";
        var vline = paper.path(vpath);
    }
    // horizontal lines
    for(var y = (this._offset.y % cellSize); y < this.height; y += cellSize){
        var hpath = "M 0 " + y + " l " + this.width + " " + y + " z";
        var hline = paper.path(hpath);
    }

(In this case cellSize = 50, and this._offset = {x:0, y:0})

Answer 1

The problem is that you're assuming l takes an absolute coordinate, but it actually takes a relative one. When you write:

M 50 0 l 50 600

You're thinking it means write a line from (50,0) to (50, 600) but it actually means start at (50, 0), move (50, 600). Hence the skewed grid.

You just need to write the vpaths like this (replacing x and y after the l with 0):

var vpath = "M " + x + " 0 l 0 " + this.height + " z";

and:

var hpath = "M 0 " + y + " l " + this.width + " 0 z";