0

How to find the center of arc in canvas with JavaScript?

enter image description here

I need to find the position of the arc and it's center.

markE
  • 102,905
  • 11
  • 164
  • 176
Griminvain
  • 95
  • 1
  • 10
  • What do you mean? Are those drawn on the canvas, or is that a random image you are importing to the canvas? Also by arc do you mean the center of the circles? If this is just some image put on the canvas and you want to find the center of those circles from the image it's not going to be easy. – Spencer Wieczorek Jul 23 '16 at 05:13
  • @spencer-wieczorek I want to extract the center of the incomplete circle from the image. it's a `` and every time the image is different so I need to find the several arcs that are making an incomplete circle and find the center of it. I managed to put the image into canvas but from there I have no clue what to do.. – Griminvain Jul 23 '16 at 09:23

1 Answers1

2

If your code drew the arc using context.arc(centerX,centerY,radius,startAngle,endAngle)

An arc is defined by its centerpoint, radius, startAngle & endAngle so then you already have the center point: [centerX, centerY].

If you didn't draw the arc but just have an image containing different colored arcs

  • Use context.getImageData to fetch all the pixel colors on the canvas.
  • Find the coordinates of 3 pixels with the color of your desired arc. The points must not be co-linear and preferably they are reasonably separated from each other.
  • Use those 3 coordinates & the algorithm in this Stackoverflow Q&A to find the center point.
Community
  • 1
  • 1
markE
  • 102,905
  • 11
  • 164
  • 176
  • And how do I find those coordinates ? – Griminvain Jul 23 '16 at 09:25
  • "How to you find those coordinates?" Learn about `.getImageData`! It returns the Red, Green & Blue colors that make up each pixel on the image based on pixel location. This [Q&A](http://stackoverflow.com/questions/29792199/canvas-pixels-to-coordinates/29806231#29806231) shows how to fetch an image's RGBA pixel data and find pixels with a specific RGB color. If you don't know the desired RGB you will have to let the user click on the desired color and fetch the RGB of that clicked pixel -- again using `.getImageData( mouseX, mouseY, 1, 1)`. – markE Jul 23 '16 at 16:27