MouseMove paddle

HTML

<canvas id="canvas" height="300" width="300" style="border:1px dotted #111;"/>

JavaScript

var x=150;
    var y=150;
    var dx=5;
    var dy=7;
    var WIDTH;
    var HEIGHT;
    var mouseX = 150;
    var mouseY;
    
    var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.arc(150,150,10,0,2*Math.PI,true);
    ctx.closePath();
    ctx.fill();
    
    function init() {
      document.getElementById("canvas").addEventListener('mousemove', moveHandler);
      return setInterval(draw,10);
    }
    function moveHandler(e){
      e = e || window.event;
      mouseX = e.offsetX;
        mouseY=e.offsetY;
    }
    function draw() {
      ctx.clearRect(0,0,300,300);
      ctx.rect(mouseX-40,mouseY-20,40,20,true);
      ctx.fillStyle = 'black';
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x,y,10,0,2*Math.PI,true);
      ctx.closePath();
      ctx.fill();
      x+=dx;
      y+=dy;
      bounce();
    }
    function bounce(){
      if(x+dx>300||x+dx<0)
        dx=-dx;
      if(y+dy>300||y+dy<0)
        dy=-dy;
    }
    init();