Var declaration overwrites current variable
<p>I need some help understanding what I'm doing wrong with my js code.
Basically I have a canvas and a particle that bounces around inside the canvas. What I want is for users to input data in a form and submit it, then the particle will start with their specified values. </p>

<p>The HTML body:</p>

<pre><code>&lt;canvas id="myCanvas" width="400" height="400"&gt;&lt;/canvas&gt;

&lt;form id="myForm" &gt;


            X Initial: 
            &lt;input type="text" id="xInit" name="xInit" /&gt;
            &lt;br/&gt;

            Y initial: 
            &lt;input type="text" id="yInit" name="yInit" /&gt;
            &lt;br/&gt;

            X Velocity: 
            &lt;input type="text" id="xDir" name="xDir" /&gt;
            &lt;br/&gt;

            Y Velocity: 
            &lt;input type="text" id="xDir" name="yDir" /&gt;
            &lt;br/&gt;


            Change:
            &lt;input type="submit" value="Submit"&gt;


&lt;/form&gt;
</code></pre>

<p>The particle is it's own class:</p>

<pre><code>function particle(x, y, dX, dY) {
    this.x = x;
    this.y = y;
    this.dX = dX;
    this.dY = dY;
    this.check = checkCollision;
}
</code></pre>

<p>I initialize the page and submit the form using jquery:</p>

<pre><code>    $(document).ready(function(){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext("2d");
        var HEIGHT = 400;
        var WIDTH = 400;
        var p1, xl, yl, xd, yd;
                   ...More code...
            $("form").submit(function(){
                xl = +$("#xInit").val();
                yl = +$("#yInit").val();
                xd = +$("#xDir").val();
                yd = +$("#xDir").val();
                p1 = new particle(xl,yl,xd,yd);
                init();
        });
    });
</code></pre>

<p>Then lastly, my init() function calls a function draw() to redraw the particle over a set Interval:</p>

<pre><code>function init() {
    draw();
    alert(p1.x);
    return setInterval(draw, 10);
}
</code></pre>

<p>So When I click submit everything works initially, it draws the particle 1 time and then it disappears forever. I believe it's because the <strong>var p1, xl, yl, xd, yd;</strong> keeps re-declaring itself. Is there a way around this? Or a better way to set this up in general?
Many Thanks.</p>

<hr>

<h1>Update</h1>

<p>The return false; part worked much appreciated</p>
