canvasを用いたボールの移動について

canvasを用いて、ボールを右に移動させる処理において分からない点があります。

html
1<!doctype html>
2   <html>
3   <head>
4     <title>breakout</title>
5     <meta charset="utf8">
6     <style>
7       canvas {
8
9         background: #eee;	
10         display:block;
11         margin:auto 0 ;	
12
13       }
14     </style>
15   </head>
16   <body>
17     <h1>breakout</h1>
18     <hr>
19     
20     <canvas id="mycanvas" width="500" height="400"></canvas>
21     
22     <script>
23       // canvasを準備する
24       var canvas = document.getElementById("mycanvas");		// canvasを操る変数を取得する
25       var ctx = canvas.getContext("2d");		// 2Dグラフィクスを描くためのオブジェクトを取得する
26       
27       // ボールを表すオブジェクトを作る
28       var ball = {
29         x: 300,			// x座標
30         y: 100,			// y座標
31         radius: 20,			// 半径
32         dx: 5,
33         dy: 5
34       }
35       // ボールを描く関数
36       function drawBall() {
37         ctx.beginPath();
38         ctx.arc( ball.x, ball.y, ball.radius, 0, Math.PI*2 );		// （x座標、y座標、半径、角度１、角度２）
39         ctx.fillStyle = "#ff0000";
40         ctx.fill();
41         ctx.closePath();
42
43       }
44      function moveBall(){
45        
46        ball.x += ball.dx;
47      }
48      
49      function collisonDetector(){
50
51        if( ball.x >= canvas.width){
52          
53          ball.dx *= -1;
54
55        }
56      }
57
58       
59       // ↓　描く処理をまとめた関数。この中に全ての処理を入れる。
60       function draw() {
61        ctx.clearRect( 0, 0, canvas.width, canvas.height );
62
63        drawBall();
64        moveBall();
65         
66
67        collisionDetector();
68
69       }
70       
71       setInterval( draw, 10 );		// 10ミリ秒間隔で描き続ける（draw関数を繰り返し実行する）
72     </script>
73   </body>
74   </html>

上記の、「function moveBall() { ball.x += ball.dx; } 」ここの部分なのですが、ball.xの座標「300」にball.dx「5」を+したら、「305」になるかと思います。となると、ボールが移動する距離は「５」のみかと思うのですが、moveBall関数を実行すると、右端までボールが移動します。何故なのでしょうか？