HTML5 Canvas - Destination-Out Composition problem

I am drawing some curves inside canvas. After the curve is complete, I need to undo some portion of drawing (I only need first 75% of the curve, so need to delete the last 25% of the curve).

Below is log of the points, that my curve goes through. After the 7th point, I am changing the canvas context's "globalCompositeOperation" property to "destination-out" and starts drawing in the reverse. As you can see from below, the points in the forward and backward direction are exactly the same. But my problem is while deleting backwards, the lines are not getting deleted correctly. I can see slight traces of lines. Problem verified in Chrome, Firefox and Opera.

point X: (484,324) with Count: 0 angle :0.7853981633974483
spiroCanvasCore.js:62point X: (460,420) with Count: 1 angle :1.5707963267948966
spiroCanvasCore.js:62point X: (315,444) with Count: 2 angle :2.356194490192345
spiroCanvasCore.js:62point X: (220,300) with Count: 3 angle :3.141592653589793
spiroCanvasCore.js:62point X: (315,155) with Count: 4 angle :3.9269908169872414
spiroCanvasCore.js:62point X: (460,179) with Count: 5 angle :4.71238898038469
spiroCanvasCore.js:62point X: (484,275) with Count: 6 angle :5.497787143782138
spiroCanvasCore.js:62point X: (460,300) with Count: 7 angle :6.283185307179586
spiroCanvasCore.js:79inverse
spiroCanvasCore.js:62point X: (484,275) with Count: 7 angle :5.497787143782138
spiroCanvasCore.js:62point X: (460,179) with Count: 6 angle :4.71238898038469
spiroCanvasCore.js:62point X: (315,155) with Count: 5 angle :3.9269908169872414
spiroCanvasCore.js:62point X: (220,300) with Count: 4 angle :3.141592653589793
spiroCanvasCore.js:62point X: (315,444) with Count: 3 angle :2.356194490192345
spiroCanvasCore.js:62point X: (460,420) with Count: 2 angle :1.5707963267948966
spiroCanvasCore.js:62point X: (484,324) with Count: 1 angle :0.7853981633974483

Could anyone please tell, what might cause this problem o开发者_高级运维r any other alternatives/solutions?

Here is a screenshot of my curve, after deletion:

EDIT: Instead of changing the globalCompositeOperation property to 'deatination-out', I simply changed the canvas context's strokestyle to match my background color. But still, the problem persists

---

The cause of your problem is antialiasing. Consider the following, separate from the composition mode: http://jsfiddle.net/9bheb/5/

ctx.lineWidth = 1;

ctx.strokeStyle = '#f00';
ctx.strokeRect( 10.5, 10.5, 20, 20 );    
ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );

// Middle case omitted for brevity

ctx.strokeStyle = '#f00';
ctx.strokeRect( 40, 10, 20, 20 );
ctx.strokeStyle = '#fff';
ctx.strokeRect( 40, 10, 20, 20 );

In the first set of code a 100% opaque 1px red line is drawn exactly aligned with the canvas grid, seen at left above. Then a 100% opaque white line is drawn overtop of it, obliterating the original line.

In the second set of code the 1px line exactly straddles between two pixels, and hence is drawn as a 2px 50% opacity red border. Then a 2px 50% white line is drawn over that, resulting in a 25% red (light pink) border left on the canvas (seen at right above). This is roughly what is happening in your case, albeit via a compositing mode.

You can't "erase" a path by drawing over it again.

---

Instead of "deleting" a portion can you instead make a clipping region around the portion of the curve that you want, so that the to-be-deleted portion is never made?

---

starting from nice analysis of Phrogz, if you erase with a slightly larger lineWidth, you'll be able to get rid of your remaining shadows.

Try it with his jfiddle, setting lineWidth = 2 when erasing. Here's my fork: //http://jsfiddle.net/UxfNg/3/