0

I have various circles (arc) drawn to a canvas, occasionaly overlapping, I am trying to figure out the best way of 'merging' any overlapping areas, or just not drawing these overlapping areas to the canvas. I have experimented with globalCompositeOperation, blurs and shadows but not been able to acheive my desired effect. Does anyone have any suggestions?

Img on left, what is currently happening. Img on right, desired result.

Current result | Desired result

Any help would be greatly appreciated.

TDH
  • 3
  • 1
  • I believe this is because of the opacity of the circles you're drawing. The easiest solution would be to have the fillStyle be set to draw the circles with an opacity of 1. If you need them to be semi-transparent though, the best way would probably be to draw a circle of opaque white in the same position, before each circle that you draw. – mpallansch May 26 '15 at 15:58
  • They do need to have some level of transparency. What would the purpose of drawing the opaque white circle beforehand be? Thanks – TDH May 26 '15 at 16:23
  • It would basically "erase" any portions of circles that have been drawn where the current circle needs to go, so the circles will never overlap – mpallansch May 26 '15 at 16:26
  • Here's a little demo so you can see it https://jsfiddle.net/923vte0t/13/ – mpallansch May 26 '15 at 16:42
  • This may help as well: http://stackoverflow.com/questions/17622037/drawing-overlapping-circles-with-alpha-channeling/17623263#17623263 –  May 26 '15 at 17:08
  • @mpadittech thanks, that demo really helps – TDH May 27 '15 at 14:39
  • @K3N, that link was ideal. Thanks! – TDH May 28 '15 at 10:13

0 Answers0