Move with cursor position

I am making a game of paddle ball, I have designed and scripted ball under boundary. I want to make a paddle more and that moves with current mouse position. How do i get that? This is my code of ball moving under boundary, I need a paddle at bottom.

<!doctype html>
<html>
<body onload="init();">
<script>
var context;
var x=150;
var y=150;
var dx=2;
var dy=4;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}

function draw()
{
  context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle="#98bf26";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,10,0,Math.PI*2,true);
  context.closePath();
  context.fill();


  // Boundary Logic
if( x<0 || x>300) dx=-dx;
if( y<0 || y>300) dy=-dy;
x+=dx;
y+=dy;
}

</script>

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

Solution

Try to add to your code

myCanvas.onmousemove = mouse_move_callback

Where mouse_move_callback is a function like

function mouse_move_callback(ev) {
  // Get mouse position
  if (ev.offsetX) {
    c_x = ev.offsetX;
    c_y = ev.offsetY;
  }
  if (ev.layerX) {
    c_x = ev.layerX;
    c_y = ev.layerY;
  }
  // Update paddle position
  update_paddle(c_x,c_y);
}