help running js animation for canvas element

Hey everyone, ive been trying to learn how to do animations on an html canvas element through js, but ive run into a bit of trouble and was wondering if one of you fine gents could help explain to me where ive gone wrong. All i am trying to do is create a simple rectangle object and move it across the screen.

var canvas=document.getElementById('canvas'); var ctx=canvas.getContext("2d"); var width=canvas.width; var height=canvas.height; var square = { x: 10, y: 10, vx: 5, wh: 25, color:'blue', draw: function(){ ctx.fillRect(this.x,this.y,this.wh,this.wh); ctx.fillStyle=color;} }; function draw(){ ctx.clearRect(0,0,width,height); square.draw(); ctx.save(); square.x += square.vx; window.requestAnimationFrame(draw); } window.onload=draw;

ok so theres the js and from what i understand about what i am trying to accomplish here, i have created a var named square and filled it with information regarding its behaviors and state, i than created the draw function i was wanting to use to animate the square and have it update the x location of the square each time it runs. i also specified at the end of the draw function to create another frame which according to my logic should have a new x location. For some reason the initial image of the square shows but the the animation doesnt seem to run. I dont know if Ive missed something crucial here, but im totally lost. Any help would be appreciated guys.