HTML5 Canvas で画像の表示

HTML5 Canvas で、画像の表示を試してみました。
表示するだけなら img タグの利用で十分ですので、いくつか編集を入れています。

Canvas については、多くの方が使用方法などをわかりやすく解説されていらっしゃるので、わたしのほうでは特に説明などは省いていますが、簡単にどのような編集を加えて試してみたのかということをソースコード中のコメントにいれてみました。

<canvas id="canv1" width="300px" height="300px"></canvas>

<script type="text/javascript">
onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('canv1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
/* 矩形を描画し、その内側を白で塗りつぶします。 */
  ctx.beginPath();
  ctx.rect(0, 0, 300, 300);
  ctx.fillStyle = "rgb(255,255,255)";
  ctx.fill();
/* 円弧を描画し、その内部をクリッピング領域にします。 */
  ctx.beginPath();
  ctx.arc(150, 150, 140, 0, Math.PI * 2, false);
  ctx.clip();
/* 画像を読み込み、表示します。 */
  var img = new Image();
  img.src = "http://appw.jp/images/IMG00004.jpg?" + new Date().getTime();

  img.onload = function() {
    ctx.drawImage(img, 160, 80, 300, 300, 0, 0, 300, 300);
  }
}
</script>

画像の編集には、高機能のアプリがいくつもありますので、ただ表示するだけであれば、Canvas を使用するまでもなさそうです。プログラム的に表示させたいようなアイデアがあるのであれば、その方法のひとつとなるかもしれません。