CODEWITHSUNDEEP
javascriptgeometryintersection
Randy Hall
Randy Hall

Reputation: 8137

Finding circle-canvas intersections with JavaScript

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.

Upvotes: 1

Views: 1651

Answers (1)

fionbio
fionbio

Reputation: 3554

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).

Upvotes: 1

Related Questions