【メモ】CANVASの領域をなんちゃってレスポン

仕様は
常にウインドウサイズ一杯まで広がる。
640px未満は通常の半分の高さになる。

sample.html

<canvas id="mycanvas">
</canvas>

sample.js

window.onload = function(){
  draw();
}
window.onresize = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext) return false;
  canvas.width = document.documentElement.clientWidth;
  if(canvas.width > 640){
    canvas.height = 300;
  }else{
    canvas.height = 300 * 0.5;
  }
  var ctx = canvas.getContext('2d');
}

課題
onloadとonresizeで同じdraw()を実行させてるのが気持ち悪い。
同時に書けたりするのか調べる
JQuery的にこういうの
$(window).on('load resize', function(){
})