How to Join multiple rectangles using html5 and CSS?

I created multiple rectangles using Canvas with unique id for each rectangle

<table class="trpnl" id="tblPanel" style="width:300%;" cellpadding="0" cellspacing="0">
<tr style="height:40px;"></tr>
@for(var i=1;i<=15;i++)
{
  <tr>
  <td style="width:20px;"></td>
  <td>                                  
  <canvas id="newCanvas_@i" width="200" height="8" style="border:1px solid #000000;"></canvas>                                               
  </td>
  </tr>
} 
</table>

this is JavaScript code for canvas

 for(var i=1;i<=15;i++)
  {
    var c = document.getElementById('newCanvas'+"_"+i)
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#708090';
    ctx.fillRect(0, 0, 200, 10);
  }

Here I am getting output like this

I want to show output like this

I tried cellpadding=”0″ cellspacing=”0″ to the table but nothing works
can anyone please give me an idea how to merge or join those rectangles like expected output.
TIA.