function canvas () {
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=800;
        for (var j = 0; j < 4; j++) {
        for (var i = 0; i < 4; i++) {
            fillRoundRect(ctx,170+i*120,170+j*120,100,100,6,"#ccc0b3");
        }
    }
    

}

function fillRoundRect(ctx,x,y,width,height,r,fillColor) {
        if (2*r>width || 2*r>height ) {
            return
        }
        ctx.save();
        ctx.translate(x, y);
        pathRoundRect(ctx,width,height,r)
        ctx.fillStyle = fillColor || "black";
        ctx.fill();
        ctx.restore();
    }

function pathRoundRect(ctx,width,height,r) {
        ctx.arc(width-r, r, r, 1.5*Math.PI,2*Math.PI ,false);
        ctx.lineTo(width, height-r);
        ctx.arc(width-r, height-r, r, 0, 0.5*Math.PI);
        ctx.lineTo(r, height);
        ctx.arc(r, height-r, r, 0.5*Math.PI, 1*Math.PI);
        ctx.lineTo(0, r);
        ctx.arc(r, r, r, Math.PI, 1.5*Math.PI);
        ctx.closePath();
        ctx.restore();
    }
addOnload(canvas);