gistfile1.js

$(function() {
	//Setting width, height and context for the canvas
	var width = 1000,
		height = 600,
		//Shorthand for JQuery object
		$canvas = $('canvas'),
		//JQuery returns an array, so we need the first object
		canvas = $canvas[0],
	context = canvas.getContext('2d');
	canvas.width = width;
	canvas.height = height;
	$canvas.width(width);
	$canvas.height(height);

	//The paddle will move along the y-axis
	var y = 0;

	function animate() {
		//Styling the background first
		context.fillStyle = '#E0FFFF';
		context.clearRect(0, 0, width, height);
		//Styling the paddle
		context.fillStyle = '#FF1493';
		//y-100 because we want the mouse to be in the center of the paddle
		context.fillRect(0, y-100, 50, 200);
		//How many times it calls the function
		setTimeout(animate, 30)
	}
	setTimeout(animate, 30);

	//When the mouse moves, function that paddle moves along y-axis
	$canvas.mousemove(function(event) {
		y = event.clientY;
	});

	function Ball() {
		this.x = x;
		this.y = y;
		this.speedX = 0;
		this.speedY = 0;
		this.radius = 8;
	}

	Ball.prototype.draw = function(draw) {
		context.fillStyle = 'black';
		context.beginPath();
		context.arc(x, y, this.radius, 0, 2*Math.PI);
		context.stroke();
	}

	Ball.prototype.move = function(speed) {
		this.x += this.speedX;
		this.y += this.speedY;
	}

	ball = new Ball();

})