This time we won’t make the canvas any different visually, it’s more just cleaning up the code. We’re making the circle into a dot object, then later it will be easier to keep track of it (and any others). interactive physics animations via javascript & canvas | 04.

[cc lang=”javascript”]

$(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();
}
});
[/cc]
Follow the whole Interactive Physics Animations via Javascript & Canvas series.