円クラスをMVC的に実装したいです！

###質問
MVCについて質問です。HTML5のCanvasで円を描いて、その円をドラッグ出来るようにしたいのですが、円の描画のところでMVCになっていない気が凄いしてちょっと詰まりました。
.
コードはcodePenに載せました。
http://codepen.io/anon/pen/zBZGPQ
.
ドラッグ処理の実装や円のヒット判定の実装はこれからなのですが、CircleオブジェクトはMVC的にはどのように書くべきなのでしょうか？
.
現状、円を描画するメソッドもヒット判定をするメソッドも、また、円の座標や半径の値を持つプロパティー、それらのsetter、getterも同一オブジェクトに書いており、これらはビューとモデルに分割すべきなのではないかと感じております。ただ、サーバーサイドMVC上がりの人間なのでいまいち、こういった場合のMVCがイメージできません。。。
.
凄く短いコードなので宜しければリファクタリングして頂けると非常に参考になるので有難いです。もちろんアドバイスだけでも大変有難いです。よろしくお願いいたします。
.
ちなみにメソッドは見易さの為、codePen上のコードではprototypeメソッドにはしておりません。

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

JavaScript
1var canvas = document.getElementById("canvas");
2var context = canvas.getContext("2d");
3
4var circle = new Circle(20, 20, 20);
5var isDragging = false;
6
7canvas.addEventListener("mousedown", function(event) {
8  var isInCircle = circle.hitTest(event.offsetX, event.offsetY);
9 
10  if (isInCircle === true) {
11    isDragging = true;
12    console.log("ドラッグを開始");
13  }
14});
15
16canvas.addEventListener("mousemove", function(event) {
17  if (isDragging === true) {
18    console.log("ドラッグ中");  
19  }
20});
21
22canvas.addEventListener("mouseup", function(event) {
23  isDragging = false;
24  console.log("ドラッグ終了");
25
26});
27
28
29
30function Circle(x, y, radius) {
31  
32  var positionX = x + radius;
33  var positionY = y + radius;
34  var radius = radius;
35  
36  this.getPositionX = function() {
37    return positionX;
38  }
39  
40  this.getPositionY = function(){
41    return positionY
42  }
43  
44  this.setPositionX = function(x) {
45    positionX = x;
46  }
47  
48  this.setPositionY = function(y) {
49    positionY = y;
50  }
51  
52  this.hitTest = function(x, y) {
53    console.log("ヒット判定の実装をする");
54    return true;
55  }
56  
57  this.draw = function() {
58    context.beginPath();
59    context.arc(positionX, positionY, radius, 0, Math.PI*2, false);
60    context.stroke();
61  }
62  
63  this.draw();
64  
65}

###追記 - 改良してみました(2016-08-13 18:33)
http://codepen.io/anon/pen/RRvogR

ひとまずMVCに分割出来ていますでしょうか？

JavaScript
1//コントローラークラス
2function ViewController(canvasElement, circleList) {
3	
4	var circleList = circleList;
5	var canvas = canvasElement;
6	var canvasView = new CanvasView(canvas.getContext("2d"));
7	var stateMap = {
8		isDragging: false
9	}
10  
11	circleList.add(new Circle(20, 20, 20));
12	circleList.add(new Circle(60, 60, 20));
13	
14	circleList.getList().forEach(function(circle) {
15		canvasView.drawCircle(circle.getPosition(), circle.getRadius());
16	})
17
18
19	canvas.addEventListener("mousedown", function(event) {
20		var isTouchedPointOnCircle = circle.hitTest(event.offsetX, event.offsetY);
21	 
22		if (isPointInCircle === true) {
23			stateMap.isDragging = true;
24			console.log("ドラッグを開始");
25		}
26	});
27
28	canvas.addEventListener("mousemove", function(event) {
29		if (stateMap.isDragging === true) {
30			console.log("ドラッグ中");  
31		}
32	});
33
34	canvas.addEventListener("mouseup", function(event) {
35		stateMap.isDragging = false;
36		console.log("ドラッグ終了");
37
38	});
39
40}
41
42
43
44//ビュークラス
45function CanvasView(context) {
46	var context = context;
47	
48	this.drawCircle = function(position, radius) {
49		context.beginPath();
50		context.arc(position.x, position.y, radius, 0, Math.PI*2, false);
51		context.fill();
52	}
53	
54}
55
56
57// circleの管理クラス
58function CircleList() {
59  
60	var list = [];
61  
62	this.add = function(circle) {
63		list.push(circle);
64	}
65  
66  	this.getList = function() {
67		return list;
68  	}
69  
70}
71
72
73
74// circleのモデルクラス
75function Circle(x, y, radius) {
76	
77	var x = x + radius;
78	var y = y + radius;
79	var radius = radius;
80	
81	this.getPosition = function() {
82		return {x: x, y: y};
83	}
84	
85	this.getRadius = function() {
86		return radius;
87	}	
88	
89	this.hitTest = function(x, y) {
90		console.log("ヒット判定の実装をする");
91		return true;
92	}
93	
94}
95
96
97
98var controller = new ViewController(document.getElementById("canvas"), new CircleList());