Canvas要素を使った描画でソースコードをDRYにしたい

Question

前提・実現したいこと

http://www.html5.jp/canvas/how2.html を参考にCanvas要素を使って棒グラフを描画しました。
うまく描画することはできましたが、冗長なコードになってしまったのでこれをDRYに修正したいです。
どのように繰り返しの記述を減らすことができるでしょうか？

該当のソースコード

<canvas id="barChart01" width="400" height="20"></canvas>
<canvas id="barChart02" width="200" height="20"></canvas>
<canvas id="barChart03" width="100" height="20"></canvas>

onload = function() {
  draw1();
  draw2();
  draw3();
};
function draw1() {
  var canvas = document.getElementById('barChart01');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var bar01 = canvas.getContext('2d');
  bar01.beginPath();
  bar01.fillStyle = '#0f6baf';
  bar01.fillRect(0, 0, 400, 20);
}
function draw2() {
  var canvas = document.getElementById('barChart02');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var bar02 = canvas.getContext('2d');
  bar02.beginPath();
  bar02.fillStyle = '#0f6baf';
  bar02.fillRect(0, 0, 400, 20);
}
function draw3() {
  var canvas = document.getElementById('barChart03');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var bar03 = canvas.getContext('2d');
  bar03.beginPath();
  bar03.fillStyle = '#0f6baf';
  bar03.fillRect(0, 0, 400, 20);
}

Answer 1

違うところは呼び出すIDだけですし、変数もその関数でvarで定義しているのでその関数内しかスコープがないので引数でわければ良いのでは。

onload = function() {
  draw('01');
  draw('02');
  draw('03');
};
function draw(num) {
  var canvas = document.getElementById('barChart'+num);
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var bar = canvas.getContext('2d');
  bar.beginPath();
  bar.fillStyle = '#0f6baf';
  bar.fillRect(0, 0, 400, 20);
}

canvasが増減するのでしたらcanvasをquery​SelectorAll()でcanvasの要素を取得してきてループで要素を丸々引数として渡せばdraw()内で使っているgetElementById()も不要になりそうです。

今後、それぞれのcanvasに別個で何かを指定することがあるのでしたらnumによって分岐させるか、
配列で設定もってそれを呼び出すか、
動的に関数を呼び出すか。

Comments

[hibikikudo]

mts10806さん＞まさに私が知りたかった回答でした。的確な助言に感謝申し上げます。

[m.ts10806]

ヒントになったようで何よりです。
数が増減するようでしたら呼び出す回数が増えるので2つ目の案（canvas全取得でループ）に切り替えてください。たぶんそちらのほうがよりDRYです。

Answer 2

自分の場合はこんな雰囲気のものを書く

<canvas id="chart"></canvas>
<div id="a"></div>

<script>
function makeObj(width,height){
	var canvas = document.getElementById('chart').cloneNode(true);
  canvas.style.width = width;
  canvas.style.neight = height;
  document.getElementById("a").appendChild(canvas);
  var canvas2d = canvas.getContext('2d');
    return {
		draw :  (function(color, rect){
      canvas2d.beginPath();
      canvas2d.fillStyle = color;
      canvas2d.fillRect(rect[0],rect[1],rect[2],rect[3]);
      })

}
}
var obj = makeObj(100, 100);
obj.draw('#0f6baf',[0,0,400,10]);
obj.draw('#0f6baf',[0,0,200,20]);
obj.draw('#0f6baf',[0,0,100,30]);
obj.draw('#0f6baf',[0,60,400,10]);
obj.draw('#0f6baf',[30,60,200,20]);
obj.draw('#0f6baf',[30,60,100,30]);