イベントオブジェクトeがundefined

前提

メジャーなブラウザで実行できるはずです

実現したいこと

マウスドラッグで動かせる2つの正方形があり(右クリック、左クリックそれぞれに実装)、
重なり合ったら、色が変わるようにしたい。

発生している問題・エラーメッセージ

38行目のe:undefined

該当のソースコード

html
1<html>
2  <head>
3      <meta charset="utf-8">
4      <style>
5        * { padding: 0; margin: 0; }
6        canvas { background: #eee; display: block; margin: 0 auto; }
7      </style>
8  </head>
9  <body>
10
11    <canvas id="cvs" width="500" height="500"></canvas>
12
13    <script>
14      var cvs = document.getElementById("cvs");
15      var ctx = cvs.getContext("2d");
16      ctx.fillStyle = "rgb(255,255,255)"
17      var side = 80;
18
19      function Square(x,y){
20        this.x = x;
21        this.y = y;
22
23        this.drawRect =  function(rgb) {
24          ctx.fillStyle = rgb;
25          ctx.fillRect(this.x,this.y,side,side);
26        }
27
28        this.move = (e) => {
29          var rect = e.target.getBoundingClientRect();
30          this.x = e.clientX - rect.left;
31          this.y = e.clientY - rect.top;
32          ctx.clearRect(0, 0, cvs.width, cvs.height);
33          s1.drawRect("rgb(0,255,0)");
34          s2.drawRect("rgb(255,0,0)");
35        }
36
37        this.getX = function(e) {
38          var rect = e.target.getBoundingClientRect();
39          this.x = e.clientX - rect.left;
40          return this.x;
41        }
42
43        this.getY = function(e) {
44          var rect = e.target.getBoundingClientRect();
45          this.y = e.clientY - rect.top;
46          return this.y;
47        }
48
49        this.double = function(me,a,b) {
50          var me = this;
51          var x1=me.getX();
52          var y1=me.getY()+80;
53          var x2=x1+80;
54          var y2=me.getY();
55          var x3=a;
56          var y3=b+80;
57          var x4=x3+80;
58          var y4=b;
59  
60          if((Math.max(x1, x3) < Math.min(x2, x4)) & (Math.max(y1, y3) < Math.min(y2, y4))){
61            ctx.fillStyle("rgb(0,0,255)")
62            ctx.fillRect(Math.max(x1, x3),Math.max(y1, y3),Math.min(x2, x4),Math.min(y2, y4));
63          }
64          }
65      }
66
67      s1 = new Square(250,50);
68      s2 = new Square(400,50);
69
70      cvs.addEventListener('load',s1.drawRect("rgb(0,255,0)"));
71      cvs.addEventListener('load',s2.drawRect("rgb(255,0,0)"));
72
73      cvs.addEventListener('click', ()=> {
74        cvs.addEventListener('mousemove',s1.move);
75        cvs.addEventListener('mousemove',s1.getX());
76        cvs.addEventListener('mousemove',s1.getY());
77        cvs.addEventListener('mousemove',s1.double(s2.getX(),s2.getY()));
78        s1.drawRect("rgb(0,255,0)");
79      });
80    
81      cvs.oncontextmenu = function () {
82        event.preventDefault();
83        cvs.addEventListener('mousemove',s2.move);
84        cvs.addEventListener('mousemove',s2.getX());
85        cvs.addEventListener('mousemove',s2.getY());
86        cvs.addEventListener('mousemove',s2.double(s1.getX(),s1.getY()));
87        s2.drawRect("rgb(255,0,0)");
88        return false;
89      };
90
91      cvs.addEventListener('mouseup',()=> {
92        cvs.removeEventListener('mousemove',s1.move);
93      });
94      cvs.addEventListener('mouseup',()=> {
95        cvs.removeEventListener('mousemove',s2.move);
96      });
97    </script>
98  </body>
99</html>

試したこと

canvasにおけるaddEventListenerで複数の関数を登録できることは調べて確認した。
関数の文法(?)に変な点がないかどうかも確認した。

行動規範の内容に同意します

回答2件

js
1        cvs.addEventListener('mousemove',s1.getX());
2        cvs.addEventListener('mousemove',s1.getY());
3...
4        cvs.addEventListener('mousemove',s2.getX());
5        cvs.addEventListener('mousemove',s2.getY());