javascript - Problems with canvas html5 can't close a draw -

i'm developing website can insert data of person, each person represented image (a circle), images in html table(the rows years , columns months), depends of birth date, in 1 position or other position. thing have link images canvas make figure, close figure. , managed join lines, know if use property ".fill()" figure closed, doesn't work , don't know why. i'm doing wrong?

here js code: (i call function "person" event onclick() in button of html, every time insert person)

    function position(year, mon) //this function puts images     {         $('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');         }     function person () {         var date;         date=prompt('birthday date','01/01/1935');         var elem = date.split('/');          var month= elem[1]; //we take month         var year=elem[2]; //we take year         var mon= num2mon(month);         var rw=document.getelementbyid("table").rows.length;         var cols = $("#table").find('tr')[0].cells.length;         position(year,mon);      draw();     }       function draw() { //this function draw lines         var table = document.getelementbyid("table");         var images = table.getelementsbytagname("img");           var canvas = document.getelementbyid("mycanvas");         var ctx = canvas.getcontext("2d");         var x,y;          canvas.width  = table.offsetwidth;         canvas.height = table.offsetheight;            function connect(image) { //this function link images             var tabbcr = table.getboundingclientrect();             var imgbcr = image.getboundingclientrect();             ctx.beginpath();             ctx.moveto(x, y);              x = imgbcr.left + (imgbcr.width / 2) - tabbcr.left;             y = imgbcr.top + (imgbcr.height / 2) - tabbcr.top;              ctx.lineto(x, y);             ctx.stroke();              //ctx.fill(); //that's no work :s             //ctx.closepath();            }         for(var i=0; i<images.length; i++){            connect( images[i]);         }     } 

thank you!

there 2 kind of paths in canvas, main path , sub-paths.

for close work need have max 1 sub-path. every time moveto() used new sub-path created when line made this:

moveto(x1, y1); lineto(x2, y2); moveto(x2, y2); lineto(x3, y3); 

you have 2 sub-paths not connected. want continue adding lines existing sub-paths this:

moveto(x1, y1); lineto(x2, y2); lineto(x3, y3); 

now possible close shape connecting x3->x1 , y3->y1.

using ctx.beginpath() in case makes worst. clear all sub-paths added main path.

what need globally (or @ higher level) create new path using beginpath() (every time need redraw content example).

then first line needs set using moveto(). every other lines using lineto().

finally can use closepath() , render using stroke() or fill() (closepath() not needed fill, stroke must called before stroke).

for example (untested, adopt needed):

function draw() { //this function draw lines     var table = document.getelementbyid("table");     var images = table.getelementsbytagname("img");       var canvas = document.getelementbyid("mycanvas");     var ctx = canvas.getcontext("2d");     var x,y;      canvas.width  = table.offsetwidth;     canvas.height = table.offsetheight;      function connect(image, index) { //this function link images         var tabbcr = table.getboundingclientrect();         var imgbcr = image.getboundingclientrect();          x = imgbcr.left + (imgbcr.width / 2) - tabbcr.left;         y = imgbcr.top + (imgbcr.height / 2) - tabbcr.top;          index === 0 ? ctx.moveto(x, y) : ctx.lineto(x, y);     }      // new path here     ctx.beginpath();      for(var i=0; i<images.length; i++){        connect( images[i], i);  // provide index can sep. move/line     }      // @ end:     ctx.fill(); }