HTML5 Circle Prevent Drag Outside Canvas and prevent collision

Question

I have HTML 5 circle drag and drop example,

http://jsfiddle.net/eGjak/503/

i want to follow things

prevent drag circles outside of the canvas
hide lines over the circles
prevent drag over another circle

i play with some codes but no luck there. can anyone please help me, by logic or some helpful resource

Hello, do you have a working example of your requirements? I'm really interested in how you implemented the collision prevention. I know how to detect collision but not how to prevent it. — gco, Feb 25 '14 at 15:05

score 3 · Accepted Answer · edited May 23 '17 at 12:12

This is an easy one. It's simply checking x doesn't leave the left or right side of the screen and y doesn't leave the top or bottom of the screen

if (x>0 || x<(canvas.width - circle.width) && y>0 || y<(canvas.height - circle.height)) {
```
...update...
```
}
Here you need to do a line/circle collision check. See here.

For this you need circle/circle collision detection. The below will return true if collided otherwise false:

this.isIntersecting = function(c1center, c1radius, c2center, c2radius)
{

    var dX = Math.pow(c1center.x - c2center.x, 2);
    var dY = Math.pow(c1center.y - c2center.y, 2);
    var r2 = Math.pow(c1radius.radius() + c2radius.radius(), 2);
    return (dX + dY <= r2);
}

c1center and c2center are object with x, y properties (eg: c1center = {x:0, y:0 })

HTML5 Circle Prevent Drag Outside Canvas and prevent collision

1 Answers1