tableのデータをcanvasに描画（作成中）

HTML

<table id="target">
  <tbody>
    <tr>  <th>1月</th>  <td>120</td>  </tr>
    <tr>  <th>2</th>    <td>59</td>   </tr>
    <tr>  <th>3</th>    <td>38</td>   </tr>
    <tr>  <th>4</th>    <td>71</td>   </tr>
    <tr>  <th>5</th>    <td>86</td>   </tr>
    <tr>  <th>6</th>    <td>184</td>  </tr>
    <tr>  <th>7</th>    <td>85</td>    </tr>
    <tr>  <th>8</th>    <td>9</td>    </tr>
    <tr>  <th>9</th>    <td>42</td>   </tr>
    <tr>  <th>10</th>   <td>87</td>   </tr>
    <tr>  <th>11</th>   <td>117</td>  </tr>
    <tr>  <th>12</th>   <td>300</td>  </tr>
  </tbody>
</table>
<span id="result"></span>

CSS

body { min-width: 425px; }
table,
canvas { margin: 2px 2px 1em; vertical-align: top; }
table { border-collapse: collapse; border-spacing:0; table-layout: inline-table; }

th,td{ border:1px solid; padding: 3px 9px; text-align: right; }
th { background: #eee; font-weight: 100; }

#target { float: left; }
#target:after { content:""; display:block; clear: both; zoom:1; }

JavaScript

/*グラフ描画するやつ 作りかけ*/

var d = document;
var getID= function(e) { return d.getElementById(e);};
//var getClass= function(c){ return document.getElementsByClassName(c);};
var getTag= function(p, t) { return p.getElementsByTagName(t); };
var randomNum= function(Min,Max){return Math.floor(Math.random()*(Max+1-Min))+Min;};

/* config */
var cW= 330, cH= 330;
var fontSize= 14, fontFamily= "Museo, Arial, Helvetica, Meiryo, sans-serif";
var tColor= "#000"; //文字色
var bSaturation= "50%", bLightness= "50%"; /*棒の彩度と明度*/
var t= getID("target"); //対象となる表を取得
var tb= t.tBodies[0];   //表のtbody(※tbody のマークアップの有無に関わらず必須っぽい)

var canvas= d.createElement("canvas");
canvas.width= cW; canvas.height= cH; /*設定値からcanvasの寸法を指定(HTML側でもやってもいい)*/

var ctx= canvas.getContext("2d");//context取得
ctx.strokeRect(0, 0, cW, cH);//strokeColor未指定時の初期カラーである黒でボーダーを描画
ctx.font= fontSize + "px " + fontFamily;//設定値からフォントを指定

for (i=0; i<12; i++) {
  var h= tb.rows[i].cells[0].innerHTML;
  var v= tb.rows[i].cells[1].innerHTML;
  ctx.fillStyle = "#000";
  ctx.fillText(h, fontSize, fontSize * i + 20);
  ctx.fillStyle = "hsl(" + i * 40 % 360 + "," + bSaturation + "," + bLightness + ")"; /*3*/
  ctx.fillRect(10 + fontSize * 2, 10 + (i * fontSize - 1), v, fontSize - 4);
}

getID("result").appendChild(canvas); //出力

  
// テーブルが複数でも書式が違っても書き出せるように工夫したい。
// (classで取得? / html側で対象セルを明示?)
// テーブルの中で最大の文字数を持つthの文字数を取得してバーの描画位置を文字サイズ×文字数分ずらし、
// バー自身のサイズも調整したい。