KineticJs : Creating gridLines for puzzle pieces

Question

I am currently using kineticJs v5.1 , i am creating a jig-saw puzzle and i have to create blocks with gridlines as a guide for user to fit the pieces into the blocks, currently i am creating via for loop to draw it but somehow i am having error creating it, why? can anybody help ? thanks :)

VerticalLine

 var verticalLine = new Kinetic.Line({
   for (var i = 0; i <= verticalPieces; i++) {
      var x = pieceWidth * i;
    points: [50, x, 1145, x],
    stroke: 'red',
    strokeWidth: 2,
    lineJoin: 'round',
    /*
     * line segments with a length of 33px
     * with a gap of 10px
     */
    dash: [33, 10]
  });

layer.add(verticalLine);

HorizontalLine

 var HorizontalLine= new Kinetic.Line({
   for (var i = 0; i <= horizontalPieces; i++) {
      var y = pieceHeight * i;
    points: [y, 640 , y, 20],
    stroke: 'red',
    strokeWidth: 2,
    lineJoin: 'round',
    /*
     * line segments with a length of 33px
     * with a gap of 10px
     */
    dash: [33, 10]
  });

layer.add(HorizontalLine);

My JsFiddle : http://jsfiddle.net/e70n2693/18/

Answer 1

You should take the for loop out of the constructor map for the line. You cannot put a for loop into a map, nonetheless pass it through the constructor. Try this:

for (var i = 0; i <= verticalPieces; i++) {
    var x = pieceWidth * i;

    var verticalLine = new Kinetic.Line({
        points: [50, x, 1145, x],
        stroke: 'red',
        strokeWidth: 2,
        lineJoin: 'round',
        /*
         * line segments with a length of 33px
         * with a gap of 10px
         */
        dash: [33, 10]
    });
    layer.add(verticalLine);
}