[解決済み] キャンバスに画像を追加する方法

質問

HTMLの新しいcanvas要素について少し実験しています。

単純にcanvasに画像を追加したいのですが、なぜかうまくいきません。

私は以下のコードを持っています。

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

画像は存在し、JavaScriptのエラーも出ません。ただ、画像が表示されないだけです。

何かとても簡単なことを見逃しているに違いない...。

どのように解決するのですか？

画像が読み込まれるまで待ってから描画する必要があります。代わりにこれを試してみてください。

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

すなわち、画像のonloadコールバックで画像を描画する。