User defined functions?

[amca01]

Some of my graphics include grids, which can be easily programmed by sets of lines. However, it would be convenient to have a function called, say, "grid" which I can simply call when needed. For example, I have the following in the "head" part of my html document:

<script>
  function grid(nr,nc,h,w) {
  for (var i=0; i<= nr; i++ ) {
      stage.path().moveTo(0,i*h).lineTo(nc*w,i*h);
  }
  for (var i=0; i<=nc; i++ ) {
      stage.path().moveTo(i*w,0).lineTo(i*w,nr*h);
  }
  }
</script>

This creates a grid with a corner at (0,0), and with parameters as given. This is all very well, but what happens if I want to draw a grid elsewhere, or rotate a grid? I shouldn't have to include too many parameters in the function itself, and I'd hope that something like:

var g  = grid(2,4,100,50);
g.translate(200,100);

should work - but it doesn't. I also can't change the style of the grid lines using "stroke". Clearly I'm missing something.

How can I write a small function for a particular graphics element, which itself can be altered by chaining with standard graphics.js functions? Many thanks!

[I should say that I am moving some mathematics notes from LaTeX/PDF to html, using MathJax for the mathematics. And I think that graphics.js would be perfect for my diagrams - once I understand it better!]

[Shestac92]

@amca01
The GraphicsJS JS is an engine for drawing. It doesn't provide too many high-level functions and wrappers.
So, complex interactivity or high-level functions you should implement yourself.
For chaining, you should return an instance of which API you want to call futher.