Why won't my javascript/canvas polygon fill? -

so i've created program list of coordinates of united states local webserver. client can these coordinates making simple request. i'm trying fill states individually, not seem working. code fill these follows

ctx.fillstyle= "#f00"; //coords holds array of json objects, store array of coordinates under 'coords' tag. these coordinates stored in array, holds [x,y]. (var i=0; i<coords.length; i++){             obj = coords[i]['coords']; //begin path             ctx.beginpath();             (var j=0; j<obj.length; j++){ //draw each point on path                 if (j!=obj.length-1){                     ctx.moveto(obj[j][0],obj[j][1])                     ctx.lineto(obj[j+1][0],obj[j+1][1])                 }             } //close path             ctx.closepath();             ctx.fill();             ctx.stroke();         } 

for reason, not fill. draws them black outline fine, fill not happen. have thrown data on gist, , can found here. https://gist.github.com/ollien/44119f42187ec21ae2c8

thanks!

each time moveto, 'break' curve. suggest use moveto in first place, lineto :

ctx.fillstyle= "#f00"; //coords holds array of json objects, store array of coordinates under 'coords' tag. these coordinates stored in array, holds [x,y]. (var i=0; i<coords.length; i++){      obj = coords[i]['coords'];      drawobj(obj); } 

with drawobj defined :

function drawobj(obj) {          if (obj.length<2) return;          ctx.beginpath();          var currobj = obj[0];          ctx.moveto(currobj[0], currobj[1]);          (var j=1; j<obj.length; j++){              currobj = =obj[j]              ctx.lineto(currobj[0],currobj[1])          }          ctx.closepath();          ctx.fill();          ctx.stroke(); }