1

I'm drawing a circle on a canvas. I would like to know, given radius and origin x/y of a circle, at what points the circle intersects (if at all) with the canvas edges.

This is a geometry question for sure, but that part seems too simple to post elsewhere. The JavaScript part is escaping me completely. I'm not even entirely sure how to begin.

The canvas will vary in size, but that's easy enough to access. The circle will be dynamic in size and position as well, but those variables are readily available. Any hints or nudges in the right direction are very welcome.

PS

I am using RaphaelJS to draw the shapes, if that helps. If anyone has a solution for canvas/modern browsers, I can backwards myself the rest.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
  • 2
    This might help: http://stackoverflow.com/questions/401847/circle-rectangle-collision-detection-intersection – elclanrs Dec 04 '12 at 03:02

1 Answers1

1

Using a javascript intersection library like http://www.kevlindev.com/gui/math/intersection/index.htm#Anchor-intersectCircleRectangl-46622

You would define the rectangle as defined by the canvas (likely 0, 0, width, height).

fionbio
  • 3,368
  • 2
  • 23
  • 38
  • Thanks for this! I would like to be able to work it out without a library (since I'll only need the one functions) but this is a great starting place! – Randy Hall Dec 04 '12 at 03:36
  • You can also think of the problem as doing a circle-line intersection test 4 times, for the 4 lines of the rectangle. – fionbio Dec 04 '12 at 03:54
  • Yup! that much is working now... but I'm having trouble finding the resulting angle of the origin to the intersection point. Sigh... high school, you were so long ago! – Randy Hall Dec 04 '12 at 04:19
  • 1
    http://stackoverflow.com/questions/10957689/collision-detection-between-a-line-and-a-circle-in-javascript might help with that. – fionbio Dec 04 '12 at 14:06