javascript - Canvases in table, weird padding -

intro:

i'm making website , want make <table/> <canvas/>es in it.

what have done:

i made <table/> <canvas/>es in can draw in them.

<table>     <tr>         <td>item1</td>         <td><canvas></canvas></td>     </tr>     <tr>         <td>item2</td>         <td><canvas></canvas></td>     </tr>     <tr>         <td>item3</td>         <td><canvas></canvas></td>     </tr> </table> 

css:

canvas {     margin: 0;     padding: 0;     height: 50px; } table {     margin: 0;     padding: 0;     width: 500px;     border: 0;     border-width: 0;     border-spacing: 0; } tr {     margin: 0;     padding: 0; } td {     margin: 0;     padding: 0;     border: 0;     border-width: 0;     border-spacing: 0;     height: 50px; } 

to make canvases appear big box want them hit each other. made code example: http://jsfiddle.net/whb8u/

window.onload = function(){     if(window.addeventlistener){         var items = document.getelementsbytagname('canvas');         for(var = 0; < items.length; i++){             drawcanvas(items[i]);         }     } };  function drawcanvas(item){     var context = item.getcontext("2d");     var canvaswidth = item.parentnode.offsetwidth;     var canvasheight = item.height = item.parentnode.offsetheight;      context.fillstyle = 'rgb(100,100,100)';     context.fillrect(0, 0, canvaswidth, canvasheight);  } 

problem:

the canvases don't touch each other. removed table border, margin, padding , spacing.

the canvases need have fixed height of 50px. (in code tried make them hit first, more important height)

but if change size in javascript <td/> around 5px bigger <canvas/>.

does know why happens and/or how fix it?

summary:

the grey boxes don't hit each other. know why happens and/or how fix it? code example: http://jsfiddle.net/whb8u/

per default <canvas/> has it's display property set inline means drawn text. gap see comes fact letters g draw below baseline. 1 way changing display property:

canvas {     display: block; } 

see demo.