Using a dot object for the first circle

$(function () {
    var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
		
    canvas = $("#canvas")[0];
    context = canvas.getContext("2d");
	
	var this_dot = {
			x: Math.random()*canvas.width/5, 
			y: Math.random()*canvas.height/5, 
			width:canvas.width, 
			height: canvas.height, 
			radius:25};
    
	draw();
 
    $("#canvas").mousedown(function (event) {
        var dx, dy, dist;
        dx = event.pageX - this.offsetLeft - this_dot.x;
        dy = event.pageY - this.offsetTop - this_dot.y;
        dist = Math.sqrt(dx * dx + dy * dy);
        if(dist < radius) {
            drag = true;
            clickX = dx;
            clickY = dy;
        }
        else {
            drag = false;
        }
    });
 
    $("#canvas").mouseup(function (event) {
        drag = false;
    });
 
    $("#canvas").mousemove(function (event) {
        if(drag) {
            this_dot.x = event.pageX - this.offsetLeft - clickX;
            this_dot.y = event.pageY - this.offsetTop - clickY;
            draw();
        }
    });
 
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(this_dot.x, this_dot.y, this_dot.radius, 0, Math.PI * 2, false);
        context.arc(this_dot.x*2, this_dot.y*2, this_dot.radius, 0, Math.PI * 2, false);
        context.arc(this_dot.x*3, this_dot.y*3, this_dot.radius, 0, Math.PI * 2, false);
        context.arc(this_dot.x*4, this_dot.y*4, this_dot.radius, 0, Math.PI * 2, false);
        context.arc(this_dot.x*5, this_dot.y*5, this_dot.radius, 0, Math.PI * 2, false);
        context.arc(this_dot.x*6, this_dot.y*6, this_dot.radius, 0, Math.PI * 2, false);
        context.fill();
    }
});

Back to the blog post