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

Question

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

I am using paper.path () and everything looks fine with my path lines:

but somehow it turns out:

here is the code i use 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 are assuming that l takes an absolute coordinate, but actually it takes a relative one. When you write:

 M 50 0 l 50 600 

You think that this means writing a line from (50.0) to (50, 600), but actually it means starting at (50, 0), moving (50, 600). Consequently, a beveled mesh.

You just need to write vpaths as follows (replacing x and y after l with 0 ):

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

and

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