JavaScriptでrequestAnimationFrameを使用したら、どんどん実行フレームが上がってしまった

###前提・実現したいこと
JavaScriptで、canvas上をクリックすると等スピードで広がる波紋を発生させたいと考えています。
が、下記エラーが発生したため原因を追求すべく質問を投稿させていただきました。

###発生している問題・エラーメッセージ
JavaScriptでcanvas上をクリックすると波紋が発生するスクリプトを書いてみたのですが、クリックをするたびに波紋の広がるスピードがあがってしまいます。

エラーは見つからず。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<head>
5	<title>Puddle</title>
6	<link rel="stylesheet" href="style.css">
7	<link href="https://fonts.googleapis.com/css?family=Roboto|Barrio" rel="stylesheet">
8</head>
9<body>
10	<header>
11		<p>Puddle</p>
12	</header>
13	<div class="canvas-box">
14		<canvas width="1000" height="1000" id="canvas"></canvas>
15	</div>
16	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
17	<script src="script.js"></script>
18</body>
19</html>

css
1*{
2	margin: 0;
3	padding: 0;
4}
5
6header{
7	background-color: white;
8	text-align: center;
9	font-family: 'Barrio', cursive;
10}
11
12header p{
13	height: 100px;
14	line-height: 100px;
15	color: #80DEEA;
16	font-size: 50px;
17}
18
19.canvas-box{
20	width: 1000px;
21	height: 1000px;
22	margin: 0 auto;
23}
24
25#canvas{
26/*	width: 1000px;
27	height: 1000px;*/
28	background-color: #212F3D;
29	/*border: 1px solid;*/
30}

JavaScript
1window.requestAnimationFrame =
2window.requestAnimationFrame ||
3window.mozRequestAnimationFrame ||
4window.webkitRequestAnimationFrame ||
5window.msRequestAnimationFrame ||
6function(cb) {setTimeout(cb, 17);};
7
8var canvas = document.getElementById('canvas');
9var ctx = canvas.getContext('2d');
10var radius = 10;
11var ripples = [];
12
13$('#canvas').on('click',function(event) {
14	var offsetX = event.offsetX;
15	var offsetY = event.offsetY;
16	var ripple = new Ripple(offsetX, offsetY);
17	ripples.push(ripple);
18	initialize();
19});
20
21function Ripple(offsetX, offsetY){
22	this.offsetX = offsetX;
23	this.offsetY = offsetY;
24	this.radius = radius;
25}
26
27function initialize(){
28	//canvasをクリア
29	clear();
30
31	//配列の要素に対してここにrenderメソッドを実行
32	ripples.forEach(function(element){
33		element.render();
34	})
35
36	if(radius<100){
37		requestAnimationFrame( initialize );
38	}else{
39		clear();
40	}
41}
42
43Ripple.prototype.render = function(){
44	if(this.radius < 100){
45		//半径を1広げる
46		this.updateRipple();
47		//波紋を描写する
48		this.create();
49	}
50}
51
52Ripple.prototype.create = function() {
53	ctx.beginPath();
54	var startAngle = 0;
55	var endAngle = 360 * Math.PI / 180;
56	ctx.arc(this.offsetX, this.offsetY, this.radius, startAngle, endAngle, true);
57	ctx.strokeStyle = "#ffffff";
58	ctx.stroke();
59}
60
61Ripple.prototype.updateRipple = function() {
62	if(this.radius < 100)this.radius++;
63        console.log(this.radius);
64}
65
66function clear() {
67	ctx.clearRect(0,0,canvas.width,canvas.height);
68}