title: MouseDown Event is not working on other computers
body: <p>I have a problem with a <code>mousedown</code> event that is so weird for me. I'm at intermediate level but I have a beginner problem.</p>
  <p>I'm making a game in which a player can control a ball and there are some bricks with texts on them. The player must first shoot a word e.g (Ethiopia) and there is another brick with the same word. Then after shooting Ethiopia the player must shoot the other Ethiopia.</p>
  <p>Code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function dummyHttpRequest() {
    return `Iran
    Denmark
    Sweden
    Iraq
    Brazil
    Ethiopia
    England
    Finland
    Canada`;
  }
  
  var isindrag = false;
  const canvas = document.getElementById("mycanvas");
  const ctx = canvas.getContext("2d");
  ctx.font = "12pt Arial";
  ctx.fillStyle = "blue";
  ctx.fillText("Mouse Speed : ", 0, 20);
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var posbricks = [];
  var times = 0;
  var dx = 0;
  var dy = 0;
  var radius = 15;
  var oldx = 0;
  var oldy = 0;
  var speed = 0;
  var friction = 0.005;
  //const XHRnames = new XMLHttpRequest();
  //XHRnames.open("GET", "data.txt", false);
  //XHRnames.send();
  //var names = XHRnames.responseText.split("\n");
  var names = dummyHttpRequest().split("\n");
  var namesResults = [];
  var numberOfSelected = [];
  for (i in names) {
      numberOfSelected[i] = 0;
  }
  for (var i = 0; i &lt; names.length * 2; i++) {
      randnumf();
  }
  function randnumf() {
      var randnum = Math.round(Math.random() * (names.length - 1));
      if (numberOfSelected[randnum] &lt; 2) {
          namesResults[i + 3] = names[randnum];
          numberOfSelected[randnum]++;
      }
      else {
          randnumf();
      }
  }
  var whatitemshooted;
  var isshooted = false;
  var interval = setInterval(function () {
      times++;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.closePath();
      if (dx &gt; 0) {
          dx -= friction;
      }
      else if (dx &lt; 0) {
          dx += friction;
      }
      if (dy &gt; 0) {
          dy -= friction;
      }
      else if (dy &lt; 0) {
          dy += friction;
      }
      x += dx;
      y += dy;
      if (isindrag) {
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.lineTo(oldx, oldy);
          ctx.stroke();
          ctx.closePath();
      }
      for (var i = 1; i &lt;= 6; i++) {
          if (times == 1) {
              posbricks[i - 1] = [];
          }
          for (var j = 1; j &lt;= 3; j++) {
              if (times == 1) {
                  posbricks[i - 1][j - 1] = { x: (i - 1) * 100, y: (j - 1) * 70, text: namesResults[(i * 3) + j - 1] };
                  //console.log(posbricks[i - 1][j - 1].text);
              }
              var fontsize = 20 - posbricks[i - 1][j - 1].text.length;
              ctx.font = fontsize + "pt Arial";
              ctx.fillStyle = "blue";
              ctx.fillRect(posbricks[i - 1][j - 1].x, posbricks[i - 1][j - 1].y, 70, 30);
              ctx.fillStyle = "yellow";
              ctx.fillText(posbricks[i - 1][j - 1].text, posbricks[i - 1][j - 1].x + 5, posbricks[i - 1][j - 1].y + 20);
              if (y - radius &lt;= posbricks[i - 1][j - 1].y + 20 &amp;&amp; y + radius &gt;= posbricks[i - 1][j - 1].y &amp;&amp; x + radius &gt;= posbricks[i - 1][j - 1].x &amp;&amp; x - radius &lt;= posbricks[i - 1][j - 1].x + 40) {
                  dx = -dx;
                  dy = -dy;
                  if (isshooted) {
                      var condition = whatitemshooted.x != posbricks[i - 1][j - 1].x || whatitemshooted.y != posbricks[i - 1][j - 1].y;
                  }
                  if (!isshooted) {
                      isshooted = true;
                      whatitemshooted = posbricks[i - 1][j - 1];
                  }
                  else {
                      if (posbricks[i - 1][j - 1].text == whatitemshooted.text &amp;&amp; condition) {
                          ctx.clearRect(posbricks[i - 1][j - 1].x, posbricks[i - 1][j - 1].y, 110, 20);
                          posbricks[i - 1][j - 1].x = NaN;
                          posbricks[i - 1][j - 1].y = NaN;
                          ctx.clearRect(whatitemshooted.x, whatitemshooted.y, 110, 20);
                          whatitemshooted.x = NaN;
                          whatitemshooted.y = NaN;
                          isshooted = false;
                      }
                      whatitemshooted = null;
                  }
              }
          }
      }
      ctx.fillStyle = "red";
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.fill();
      checkCollision();
  }, 10);
  /*
      oldx = x;
      x = event.clientX;
      y = event.clientY;
      speed = Math.abs(x - oldx);
  */
  function checkCollision() {
      if (x &gt;= canvas.width - radius || x &lt;= radius) {
          dx = -dx;
      }
      if (y &gt;= canvas.height - radius || y &lt;= radius) {
          dy = -dy;
      }
  }
  canvas.addEventListener("mousedown", function (event) {
      if (event.clientX &gt;= x &amp;&amp; event.clientX &lt;= x + (radius * 2) &amp;&amp; event.clientY &gt;= y &amp;&amp; event.clientY &lt;= y + (radius * 2)) {
          dx = 0;
          dy = 0;
          isindrag = true;
          oldx = x;
          oldy = y;
      }
  });
  canvas.addEventListener("mousemove", function (event) {
      if (isindrag) {
          x = event.clientX;
          y = event.clientY;
      }
  });
  canvas.addEventListener("mouseup", function (event) {
      if (isindrag &amp;&amp; event.clientX &lt; canvas.width &amp;&amp; event.clientY &lt; canvas.height &amp;&amp; event.clientX &gt; 0 &amp;&amp; event.clientY &gt; 0) {
          isindrag = false;
          dx = -(x - oldx) / 30;
          dy = -(y - oldy) / 30;
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="index.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="mycanvas" width="600" height="600"&gt;&lt;/canvas&gt;
      &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In Data.txt :</p>
  <pre><code>Iran
  Denmark
  Sweden
  Iraq
  Brazil
  Ethiopia
  England
  Finland
  Canada
  </code></pre>
  <p>On my computer (with web server for chrome) it runs completely fine but on my other computer (in a website) the ball doesn't move when I drag it.</p>
  <p>What should I do?</p>