Geek Answers Handbook

Marking the intersecting area between two circles in the canvas

I am trying to mark an overlapping area between two circles (e.g. on a Venn diagram). I figured out how to do this by drawing two arcs using two intersecting points, and fill the path using fill() . I know the coordinates of the intersection points, but how to use this as an input to the arc() function?

 ctx.beginPath(); ctx.arc(circle1.x,circle1.y,circle1.r, ? , ? ,true); ctx.fill(); ctx.closePath();

enter image description here

+7
source share
1 answer

You can draw the intersection of two shapes using canvass globalCompositeOperation

enter image description here

GlobalCompositeOperation allows you to control which parts of old and new drawings are shown on the canvas.

Here you can see examples of each layout mode: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

We use 2 of these layout modes to highlight the intersection of your two circles:

source-top

Given that the left circle is already drawn, source-atop will draw only the intersecting part of the right circle.

  ctx.globalCompositeOperation="source-atop"; ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

destination over

Given that the left circle is already drawn, destination-over will draw the right circle under the existing left circle.

  ctx.globalCompositeOperation="destination-over"; ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);

There is a lot of it, so that you can comment on the entire code of the drawing, and then uncomment it once to find out what effect each operation has.

Heres code and script: http://jsfiddle.net/m1erickson/JGSJ5/

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle="yellow"; ctx.strokeStyle="black"; ctx.lineWidth=3; var circle1={x:100,y:100,r:50}; var circle2={x:140,y:100,r:50}; // draw circle1 ctx.save(); ctx.beginPath(); ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false); ctx.stroke(); ctx.fill(); // composite mode "source-atop" to draw the intersection ctx.beginPath(); ctx.fillStyle="orange"; ctx.globalCompositeOperation="source-atop"; ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); ctx.fill(); ctx.stroke(); ctx.restore(); // destination-over to draw fill for circle2 again ctx.beginPath(); ctx.globalCompositeOperation="destination-over"; ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); ctx.fill(); // back to normal composite mode (newest drawings on top) ctx.globalCompositeOperation="source-over"; // draw the stroke for circle1 again ctx.beginPath(); ctx.arc(circle1.x,circle1.y,circle1.r, 0, 2*Math.PI, false); ctx.stroke(); // draw the stroke for circle2 again ctx.beginPath(); ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false); ctx.stroke(); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>
+9
source

More articles:


All Articles