KineticJS - How draw repeat line like ruler?

I am new to KineticJS, I want to make a repeated line like a ruler. Is there any other way making line without call line1, line2, line3, etc? I try to make that with for, but error happen. Anyone could help?

Ruler I want make :

Ruler

My error code :

for (int i = 0; i < 10; i++) {
    var rects = new Kinetic.Rect({
            x: 70,
            y: 75,
            width: 3,
            height: 10,
            fill: 'grey'
        });
    layer.add(rects);
}

JsFiddle

Thanks

Solution

You can make your ruler like this:

Start with a group.
Add a Rect with gradient background.
Add a custom Shape with markings.

enter image description here

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/UcZ9H/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var ruler=new Kinetic.Group({
        x:50,
        y:50,
        width:265,
        height:70,
        draggable:true
    });
    layer.add(ruler);

    var rulerBG=new Kinetic.Rect({
        x:0,
        y:0,
        width:265,
        height:70,
        fillLinearGradientStartPoint: [107, 0],
        fillLinearGradientEndPoint: [107, 70],
        fillLinearGradientColorStops: [0,'white', .75,"rgba(236,247,252,1)", 1,"rgba(204,234,246,1)"],
        stroke:"rgba(204,234,246,1)",
        strokeWidth:.5
    });
    ruler.add(rulerBG);

    var rulerMarks = new Kinetic.Shape({
      x:0,
      y:0,
      drawFunc: function(context) {
        context.beginPath();
        for(var i=0;i<5;i++){
            context.moveTo(10+i*50,50);
            context.lineTo(10+i*50,30);
            context.fillText((i*20),10+i*50-5,20);
            for(var j=0;j<5;j++){
                context.moveTo(10+i*50+j*10,45);
                context.lineTo(10+i*50+j*10,35);
            }
        }
        context.moveTo(5*50,50);
        context.lineTo(5*50,30);
        context.fillText((5*20),5*50-8,20);

        context.fillStrokeShape(this);
      },
      stroke: 'black',
      strokeWidth:2 
    });
    ruler.add(rulerMarks);

    layer.draw();


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>