HTML5+Javascript Drawing a circle using canvas.

ripple.html

<script>
// 波紋描画
function ripple(){
  // 変数の初期設定
  var timer;
  /* canvasの取得 */
  var canvas = document.getElementById('canvas');
  /* 2Dコンテキスト */
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = 'Green'; // 線の色
  ctx.lineWidth = 10;        // 線の幅

  var r = 0;                 // 円の半径
  var add_r = 1;             // 円の半径増加値
  var max_r = 200;           // 円の半径 最大値
  var x = 250;               // 円の表示位置
  var y = 250;

  var draw = function(){
    // 円の半径を加算 (演算誤差を切り上げ)
    r = Math.ceil(r + add_r);
    
    // 円の描画
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.stroke();

    if (r < max_r){
      timer = setTimeout(draw, 10);
    }else{ 
      r = 0;
      timer = clearTimeout(timer);
    }
  }
  // 再描画
  timer = setTimeout(draw, 10);
};
</script>
<input type="submit" value="ripple" onclick="ripple()">
<canvas id='canvas' height=500 width=500 style='float: right; border: solid 3px Gray'></canvas>