HTML5 - Extreme Breakout Game

My first attempt with input from my nephew... Watch out for improvements are coming...

HTML

<div class ="startup" width="600px" height="600px">
          <div class="splash">
          Breakout Extreme!!!
          </div>
          <div id ="game">
              <p>Press <span class="badge">space</span> key to continue...</p>
        <p>On the GAME screen, press <span class="badge">ENTER or RETURN </span>key to start the game". </p>
        <p>To pause the game press <span class="badge">p</span> and to resume the game press <span class="badge">r</span>.</p>
        <p>The losing is determined if the "primary ball", which is distinctly marked touches the ground.</p>


        <div class = "level">
            LEVEL - 1
        </div>

        <div class="copyright">
          &copy;By Rajesh Pillai
       </div>
          </div>
      
  </div>
  <div id="canvas-wrapper">
      <canvas id="canvas" width="600px" height="600px">
         Your browser doesn't support the cool canvas features.
      </canvas>
 </div>

CSS

html, body {
  margin: 0;
  padding:0;
  background: black;
}
.level
{
  padding: 5px;
  margin: 10px auto;
  width: 100px;
  border: 1px solid yellow;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;

}

.badge{
   margin: 10px auto;
  width: 100px;
  background: yellow;

  border: 1px solid yellow;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  color: black;
}
#canvas-wrapper {
    width: 600px;
     height:610px;
     margin: 0px auto;
     border: 2px solid rgb(50,50,50);
     display: none;
}

#canvas {
    margin-top:10px;
    padding:0;
    background-color: black;
    display: none;
}

#game {
    font-family : Geo;
    font-size: 20px;
    color : rgb(200,200,100);
    text-align: center;
}

.copyright {
  margin: 0 auto;
  width:200px;
  padding-top: 40px 10;
  background-color: rgb(50,50,50);
}

.splash {
    padding: 20px;
    font-family : Slackey;
    font-size : 60px;
    line-height : 60px;
    margin : 0;
    text-align : center;
    color : rgb(70,120,20);
    text-shadow : 1px 1px 2px rgb(255,255,0),
                  -1px -1px 2px rgb(255,255,0),
                  5px 8px 8px rgb(0,0,0);
}

.startup {
  width: 100%;
  height: 100%;
  background-color: black;
}

JavaScript

$(function() {
  
  $(document).on("keyup", start);

    function start(evt) {
      if (evt.keyCode === 32) {
        $(".startup").hide();
        $("#canvas").show();
          //var breakout = new Breakout();
          $("#canvas-wrapper").show();
          $(document).off("keyup", start);
      }
    } 
});





var Breakout = function () {
  if (!(this instanceof Breakout)) {
      return new Breakout();
  }
  this.trialRun = false;
  this.gameLevel = 1;
  this.gameLoop = null;
  this.isPaused = false;
  this.init();
  this.draw();
};


Breakout.prototype.pause = function (self) {
  clearInterval(self.gameLoop);   
}

Breakout.prototype.resume = function (that) {
  clearInterval(that.gameLoop);
  that.gameLoop = setInterval((function(self) {
    return function () {
      self.animate(self);
    }
  })(that), 1000/60);
}

Breakout.prototype.captureKeys = function () {
  var that = this;
  $(document).on("keyup",function(evt) {
      if (evt.keyCode === 13) {
        if (that.gameLoop === null) {
          that.clear();
          that.init(that.gameLevel);
          that.start();
        }
      }
      // if 'p' key pressed, then pause
      else if (evt.keyCode === 80) {
        if (!that.isPaused) {
            that.isPaused = true;
            that.pause(that); 
          }
      }
      else if (evt.keyCode === 82) {   // 'r' key pressed
          if (that.isPaused) {
            that.isPaused = false;
            that.resume(that);        
          }
      }
      
  });

  $(document).on("keydown keypress keyup",function(evt) {
    if (evt.keyCode === 39) {
        that.paddleMove = 'RIGHT';
    } else if (evt.keyCode === 37){
        that.paddleMove = 'LEFT';
    }
    that.movePaddle(that.paddleMove, that.paddle.deltaX);
  });         

  
  $(document).on("keyup",function(evt) {
      if (that.paddleMove === 'LEFT') {
        that.paddle.deltaX = -3;
      } 
      else if(that.paddleMove === 'RIGHT'){
        that.paddle.deltaX = 3;
      }
  });...