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);