Want a paddle at bottom x-axis in this animation - css

Question

I am making an animation of ball and paddle. Ball is bouncing well.
After this i want a paddle or a <div> element shaped "paddle" at x-axis.
This paddle must be moving only by x-axis and should be moving when i active cursor at any position to x-axis.
Any help?
Here is my code:
var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;
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() {
var ctx=document.getElementById("canvas").getContext("2d");
return setInterval(draw,10);
}
function draw() {
ctx.clearRect(0,0,300,300);
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();
And in a Fiddle, here.

Answer 1

Try this code:
In your var declarations:
var mouseX = 150;
In your init() function:
document.getElementById("canvas").addEventListener('mousemove', moveHandler);
In your draw() function:
ctx.rect(mouseX-20,280,40,5); // rect( x , y , width , height )
ctx.fillStyle = 'black'; // ^ This is the mouse's X position, minus half the paddle width.
ctx.fill();
And finally, add this function:
function moveHandler(e){
e = e || window.event; // Compatibility.
mouseX = e.offsetX;
}
So, your resulting code Will look like this:
var x=150;
var y=150;
var dx=2;
var dy=4;
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){
mouseX = e.offsetX;
}
function draw() {
ctx.clearRect(0,0,300,300);
ctx.rect(mouseX-20,280,40,5);
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();