Javascript canvas rectangle animation not working
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;&lt;/title&gt;

&lt;script&gt;
function draw() {
var ctx = document.getElementById("canvas1").getContext("2d");

// Rectangle position
var posX = 5;
var posY = 5;
ctx.fillStyle = "white";
ctx.fillRect (posX, posY, 50, 50);

document.addEventListener("keydown", function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    if(key_press == "s") {
        posY += 3;
    }
 })
}
window.onload = draw;
&lt;/script&gt;
&lt;style&gt;
#canvas1 {
    background: #000000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="canvas1" width="1000" height="1000"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Someone pls tell me why this is not working. When "s" is clicked. Increase posY's value by 3;
I have had this issue now for a long time. Does it have anything to do with the draw(); function?</p>

<p>I am not very good at javascript so i would really appreciate tips too.</p>