oop - JavaScript, trying to make my game more OOPey, broke it -

originally used var playerpaddle1 = {...} , got pong game working, want learn better oop techniques have:

function paddle() {     this.x = 50;     this.y = 234;     this.vx = 0;     this.vy = 0;     this.width = 19;     this.height = 75;     this.draw = function() {          var self = this;         var img = new image();           img.src = 'images/paddle.png';           img.onload = function(){               ctx.drawimage(img, self.x, self.y);           };     };     this.update = function() {         // divide velocity fps before adding         // onto position.         this.x += this.vx / fps;         this.y += this.vy / fps;          // collision detection         if ( (this.x) < 0 ) {             this.x = 0;         }         /*if ( (this.x + this.width) > (canvas.width / 2) ) {             this.x = (canvas.width / 2) - this.width;*/          if ( (this.y) < 0 ) {             this.y = 0;         }         if ( (this.y + this.height) > canvas.height) {             this.y = canvas.height - this.height;         }     }; };  var player1paddle = new paddle(); 

and keyboardinput script not work paddle anymore (my paddle no longer move when press keys).

window.onkeydown = function( e ) {     e = e || window.event;     var code = e.keycode;     if ( code === 37 ) {         player1paddle.vx = -200;     } else if ( code === 38 ) {         player1paddle.vy = -200;     } else if ( code === 39 ) {         player1paddle.vx = 200;     } else if ( code === 40 ) {         player1paddle.vy = 200;     } };  window.onkeyup = function( e ) {     e = e || window.event;     var code = e.keycode;     if ( code === 37 ) {         player1paddle.vx = 0;     } else if ( code === 38 ) {         player1paddle.vy = 0;     } else if ( code === 39 ) {         player1paddle.vx = 0;     } else if ( code === 40 ) {         player1paddle.vy = 0;     } }; 

i thought set same constructor function instead of variable object

window.onkeydown = function( e ) {     e = e || window.event;     var code = e.keycode;     if ( code === 37 ) {         player1paddle.vx = -200;     } else if ( code === 38 ) {         player1paddle.vy = -200;     } else if ( code === 39 ) {         player1paddle.vx = 200;     } else if ( code === 40 ) {         player1paddle.vy = 200;     }     player1paddle.update(); // forget tell new info!     player1paddle.draw(); };  window.onkeyup = function( e ) {     e = e || window.event;     var code = e.keycode;     if ( code === 37 ) {         player1paddle.vx = 0;     } else if ( code === 38 ) {         player1paddle.vy = 0;     } else if ( code === 39 ) {         player1paddle.vx = 0;     } else if ( code === 40 ) {         player1paddle.vy = 0;     }     player1paddle.update(); // forget tell new info!     player1paddle.draw(); };