Why is my random value getting overwritten almost instantly?
<p>I am having a problem with my code. I try to make objects spawn in random locations as you can see with <code>drawHyperBall()</code>, and, <code>getRandomIntX()</code>, and <code>getRandomIntY()</code>. What is happening though, is the random value gets overwritten almost instantly. How can I fix this?</p>

<p>Code below:</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>var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
var ballRadius = 40;
var hBallRadius = 10;
var w = 5;
var hunger = 630;
var hypo = 0;
var hyper = 0;
var randomX;
var randomY;
var Keys = {
     up: false,
        down: false,
        left: false,
        right: false
};
 
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#00FF00";
    ctx.fill();
    ctx.lineWidth= 3.5;
    ctx.stroke();
    ctx.closePath();
}
 
function drawConceBar() {
 ctx.strokeRect(100,930,630,30)
}
 
function drawHungerBar() {
 ctx.fillStyle = "#73591C";
 ctx.fillRect(1140,930,hunger,30)
 ctx.fillStyle = "black";
 ctx.strokeRect(1140,930,630,30)
}

function drawTitle() {
 ctx.fillStyle = "black";
 ctx.font = "120px Arial";
 ctx.fillText("Osmos.is",canvas.width/2 -210,120);
}
function drawBorder() {
 ctx.strokeRect(100,150,1670,730);
}
 
function getRandomIntX(minX,maxX) {
    return Math.floor(Math.random() * (maxX- minX + 1)) + minX;
}
function getRandomIntY(minY,maxY) {
    return Math.floor(Math.random() * (maxY - minY + 1)) + minY;
}

function drawHyperBall() {
 ctx.beginPath();
    ctx.arc(getRandomIntX(110, 1660), getRandomIntY(160, 720), hBallRadius, 0, Math.PI*2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}
 
function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 drawBall();
 
 drawBorder();
  
 drawTitle();
  
 drawConceBar();
  
 drawHungerBar();
  
 if(y &gt; 830) {
     y -= 5;
 }
 else if(y &lt; 195) {
     y += 5;
 }
 
 if(x &lt; 150) {
  x += 5;
 }
 else if(x &gt; 1720) {
  x -= 5;
 }
  
 if (Keys.up) {
     y -= 5;
 }
 else if (Keys.down) {
     y += 5;
 }

 if (Keys.left) {
     x -= 5;
 }
 else if (Keys.right) {
     x += 5;
 }
 
 if (hunger &lt;= 0) {
  hunger += 1;
 }
 else {
  hunger -= 1;
 }
}
 
window.onkeydown = function(e) {
    var kc = e.keyCode;
    e.preventDefault();
    if      (kc === 37) Keys.left = true;  // only one key per event
    else if (kc === 38) Keys.up = true;    // so check exclusively
    else if (kc === 39) Keys.right = true;
    else if (kc === 40) Keys.down = true;
};
 
window.onkeyup = function(e) {
    var kc = e.keyCode;
    e.preventDefault();
    if      (kc === 37) Keys.left = false;
    else if (kc === 38) Keys.up = false;
    else if (kc === 39) Keys.right = false;
    else if (kc === 40) Keys.down = false;
};

setInterval(draw, 10);
setInterval(drawHyperBall, 1000);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>