3

I have an arc with a blue outline and then a circle covering part of the arc using the global composite operator "destination-out", resulting in part of the arc being canceled out / cut off, but that leaves part of the new shape without an outline, is there any easy way to re-establish an outline to the shape?

Working example can be found here: http://jsfiddle.net/NY2up/

arc

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();

ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

​

01AutoMonkey
  • 2,515
  • 4
  • 29
  • 47

2 Answers2

2

live Demo

What I did was reset the globalComposition back to source-over and stroked a partial arc over the spot to give the effect.

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();


ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

// reset the global comp and draw a partial arc with the proper radians.
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.arc(100, 100, 20, 1.61,-0.11, true);
ctx.stroke();
ctx.closePath();
​
Loktar
  • 34,764
  • 7
  • 90
  • 104
0

I think you can draw the third arc to the canvas

rafeal piao
  • 41
  • 1
  • You mean something like this?: http://jsfiddle.net/kra86/ , it kind of works but it's not accurate / clean enough. Maybe I could just skip the composite and do the shape as a path, not sure how to do the curve though. – 01AutoMonkey Dec 05 '12 at 18:45