javascript - Trying to create a pattern out of circles? -

i trying imitate a pattern found on internet, weird lines in middle , when trying connect set of circles on top.

also, when try fill, becomes black.

console.log("grid");    var canvas = document.getelementbyid("canvas");  var image_b = document.getelementbyid("brown");  var image_g = document.getelementbyid("grey");    canvas.width = window.innerwidth;  canvas.height = window.innerheight;        var ctx = canvas.getcontext("2d");    var side = 160;  var side2 = 150;        ctx.strokestyle = 'black';  ctx.fillstyle = 'white';    function draw() {      canvas.width = window.innerwidth;    canvas.height = window.innerheight;        ctx.clearrect(0, 0, window.innerwidth, window.innerheight);    var widthnbr = math.ceil(window.innerwidth / side) + 1;    var heightnbr = math.ceil(window.innerheight / side) + 1;      var counter = 0;    (var = 0; < widthnbr; i++) {      (var j = 0; j < heightnbr; j++) {              ctx.beginpath();          var x = side * + side / 2;        var y = side * j + side / 2;          var = side * + side / 2;        var s = side * j + side / 2;          var d = side * + side / 2;        var f = side * j + side / 2;          var g = side * + side / 2;        var h = side * j + side / 2;          var q = side * + side / 2;        var w = side * j + side / 2;          var o = side * + side / 2;        var p = side * j + side / 2;            var x1 = side2 * + side2;        var y1 = side2 * j + side2;          var a1 = side2 * + side2;        var s1 = side2 * j + side2;          var d1 = side2 * + side2;        var f1 = side2 * j + side2;          var g1 = side2 * + side2;        var h1 = side2 * j + side2;          var q1 = side2 * + side2;        var w1 = side2 * j + side2;          var o1 = side2 * + side2;        var p1 = side2 * j + side2;            ctx.arc(x, y, side / 2, 0, math.pi * 2);        ctx.arc(a, s, side / 2.5, 0, math.pi * 2);        ctx.arc(d, f, side / 3.5, 0, math.pi * 2);        ctx.arc(g, h, side / 5.3, 0, math.pi * 2);        ctx.arc(q, w, side / 9, 0, math.pi * 2);        ctx.arc(o, p, side / 18, 0, math.pi * 2);        ctx.linewidth = 5;          ctx.arc(x1, y1, side2 / 2, 0, math.pi * 2);        ctx.arc(a1, s1, side2 / 2.5, 0, math.pi * 2);        ctx.arc(d1, f1, side2 / 3.5, 0, math.pi * 2);        ctx.arc(g1, h1, side2 / 5.3, 0, math.pi * 2);        ctx.arc(q1, w1, side2 / 9, 0, math.pi * 2);        ctx.arc(o1, p1, side2 / 18, 0, math.pi * 2);                ctx.stroke();        // ctx.fill();          ctx.closepath();        counter++;          }    }    }    draw();

<canvas id="canvas"></canvas>

you have think canvas path drawings pencil drawing on paper :

just after path declaration (beginpath), when ctx.arc(x, y, rad, 0, math.pi*2) pen goes coordinates (x, y), , because x , y center position of arc putted @ rad distance center draw circle. 0 tells start @ 3 o'clock, in case, need add rad x value.

at moment, pen on paper.

it draws arc, , when tell arc(x1, y1, rad, ...), goes directly coordinates (x1+rad, y1) , draws new arc.

the problem here never told raise pencil paper, can see line goes last point on first arc first point on next one.

fortunately, canvas api comes handy set of operations, , "raise_the_pen_and_move_to_coordinates_x,y_without_ruining_my_paper" called moveto.

by telling context gently raise pencil , move next first drawing point, before drawing arc, you'll avoid these trailing lines.

so basically, 3 arcs :

// initialize new drawing ctx.beginpath(); // here can set directly because pen not on paper yet ctx.arc(x, y, rad, 0, math.pi*2); // tell raise pen off paper //  , go next starting point (3 o'clock in our case) ctx.moveto(x1 + rad, y1); ctx.arc(x1, y1, rad, 0, math.pi*2); // once again ctx.moveto(x2 + rad, y2); ctx.arc(x2, y2, rad, 0, math.pi*2); // we've got clear independents arcs ctx.stroke(); 

and code _{(that clean lot using arrays btw)}

var canvas = document.getelementbyid("canvas");  canvas.width = window.innerwidth;  canvas.height = window.innerheight;    var ctx = canvas.getcontext("2d");    var side = 160;  var side2 = 150;    ctx.strokestyle = 'black';  ctx.fillstyle = 'white';    function draw() {      canvas.width = window.innerwidth;    canvas.height = window.innerheight;      ctx.clearrect(0, 0, window.innerwidth, window.innerheight);    var widthnbr = math.ceil(window.innerwidth / side) + 1;    var heightnbr = math.ceil(window.innerheight / side) + 1;      var counter = 0;    (var = 0; < widthnbr; i++) {      (var j = 0; j < heightnbr; j++) {          ctx.beginpath();          var x = side * + side / 2;        var y = side * j + side / 2;          var = side * + side / 2;        var s = side * j + side / 2;          var d = side * + side / 2;        var f = side * j + side / 2;          var g = side * + side / 2;        var h = side * j + side / 2;          var q = side * + side / 2;        var w = side * j + side / 2;          var o = side * + side / 2;        var p = side * j + side / 2;            var x1 = side2 * + side2;        var y1 = side2 * j + side2;          var a1 = side2 * + side2;        var s1 = side2 * j + side2;          var d1 = side2 * + side2;        var f1 = side2 * j + side2;          var g1 = side2 * + side2;        var h1 = side2 * j + side2;          var q1 = side2 * + side2;        var w1 = side2 * j + side2;          var o1 = side2 * + side2;        var p1 = side2 * j + side2;          ctx.moveto(x + side / 2, y);        ctx.arc(x, y, side / 2, 0, math.pi * 2);        ctx.moveto(a + side / 2.5, s);        ctx.arc(a, s, side / 2.5, 0, math.pi * 2);        ctx.moveto(d + side / 3.5, f)        ctx.arc(d, f, side / 3.5, 0, math.pi * 2);        ctx.moveto(g + side / 5.3, h)        ctx.arc(g, h, side / 5.3, 0, math.pi * 2);        ctx.moveto(q + side / 9, w)        ctx.arc(q, w, side / 9, 0, math.pi * 2);        ctx.moveto(o + side / 18, p)        ctx.arc(o, p, side / 18, 0, math.pi * 2);        ctx.linewidth = 5;          ctx.moveto(x1 + side2 / 2, y1)        ctx.arc(x1, y1, side2 / 2, 0, math.pi * 2);        ctx.moveto(a1 + side2 / 2.5, s1)        ctx.arc(a1, s1, side2 / 2.5, 0, math.pi * 2);        ctx.moveto(d1 + side2 / 3.5, f1)        ctx.arc(d1, f1, side2 / 3.5, 0, math.pi * 2);        ctx.moveto(g1 + side2 / 5.3, h1)        ctx.arc(g1, h1, side2 / 5.3, 0, math.pi * 2);        ctx.moveto(q1 + side2 / 9, w1)        ctx.arc(q1, w1, side2 / 9, 0, math.pi * 2);        ctx.moveto(o1 + side2 / 18, p1)        ctx.arc(o1, p1, side2 / 18, 0, math.pi * 2);          ctx.stroke();          counter++;        }    }    }    draw();

<canvas id="canvas"></canvas>

as correctly noted spencer wieczorek in comments above, result wanted, you'll have white-fill largest arcs, let find way training.

---

also, small note on closepath() using in code, name might quite confusing when see number of people misusing it, note doesn't ends path declaration. lineto(last_time_i_putted_the_pencil). in case of closed circle, doesn't have effect because last_time_i_putted_the_pencil === current_pencil_position_on_the_paper, it's source of lot of problems.

---

and other small note, users bit more experienced (probably op in few days / weeks) :
other operations allow raise our pencil paper : the transformation commands.
(mainly settransform, , subsets transform, translate, rotate , scale).
these operations first raise pen, , move paper rather pen. comes handy in lot of situations.
, set normal position, have call settransform(1,0,0,1,0,0).