<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Circle</title>
<style>
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: url("hoge.png");
  background-size: cover;
}
</style>
</head>
<body>
  <script>
    ;(function() {
      var canvas = document.createElement("canvas"), W, H, mr, sr, mx, my, num = 6, particles = [];
      canvas.style.background = "transparent";
      var ctx = canvas.getContext("2d");
      document.body.appendChild(canvas);

      function Circle(ctx, deg) {
        this.ctx = ctx;
        this.deg = deg || 0;
        this.h = false;
        this.v = 0.2;
      }

      Circle.prototype = {
        render : function() {
          this.updatePos();
          this.draw();
        },

        updatePos : function() {
          this.x = Math.cos(Math.PI / 180 * this.deg) * this.mr + this.mx;
          this.y = Math.sin(Math.PI / 180 * this.deg) * this.mr + this.my;
          this.deg += this.v;
        },
        draw : function() {
          ctx = this.ctx;
          ctx.beginPath();
          if (this.h) {
            ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
            ctx.arc(this.x, this.y, this.sr + 15, 0, 360 * (Math.PI / 180), false);
            ctx.fill();
          } else {
            ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
            ctx.arc(this.x, this.y, this.sr, 0, 360 * (Math.PI / 180), false);
            ctx.stroke();
          }
          ctx.closePath();
        },
        setWindow : function(W, H, mr, sr, mx, my) {
          this.W = W, this.H = H, this.mr = mr, this.sr = sr,
              this.mx = mx, this.my = my;
        },
        hover : function(mx, my) {
          this.a = this.x - mx;
          this.b = this.y - my;
          if (this.a * this.a + this.b * this.b <= this.sr * this.sr) {
            this.h = true;
            return true;
          } else {
            this.h = false;
            return false;
          }
        },
        vSet : function(v) {
          this.v = v ? 0 : 0.2;
        }
      };

      for (var i = 0; i < num; i++) {
        particle = new Circle(ctx, (360 / num) * i);
        particles.push(particle);
      }

      function resize() {
        W = canvas.width = window.innerWidth,
            H = canvas.height = window.innerHeight,
            mr = Math.min(W, H) / 3,
            sr = Math.min(W, H) / 10,
            mx = W / 2, my = H / 2;
        for (j = 0; j < num; j++) {
          particles[j].setWindow(W, H, mr, sr, mx, my);
        }
      }
      function hover(e) {
        var mx = e.clientX, my = e.clientY;
        for (j = 0; j < num; j++) {
          if (particles[j].hover(mx, my)) {
            canvas.style.cursor = "pointer";
            for (n = 0; n < num; n++) {
              particles[n].vSet(true);
            }
          } else {
            for (n = 0; n < num; n++) {
              canvas.style.cursor = "default";
              particles[n].vSet(false);
            }
          }
        }
      }
      resize();
      window.addEventListener("resize", resize, false);
      window.addEventListener("mousemove", function(e) {
        hover(e);
      }, false);

      (function loop() {
        ctx.clearRect(0, 0, W, H);
        particles.forEach(function(e) {
          e.render();
        });
        window.requestAnimationFrame(loop);
      }());
    }());
  </script>
</body>
</html>

いずれかのパーティクル（円）にマウスが重なった時に、

  1. 円を拡大して塗りつぶす
  2. アニメーションを止める（すべての円）
  3. カーソル変更

をさせたいです。

1.は実装できたのですが、2.と3.が1つのパーティクルにしか適応されなくて詰んでいます。
ご教授頂けると幸いです。。。
あと初心者のなのでクソコードだったらごめんなさい(´・ω・`)