Home/ Questions/Q 3873478
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:02:28+00:00

I am drawing some curves inside canvas. After the curve is complete, I need

  • 0

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 or any other alternatives/solutions?

Here is a screenshot of my curve, after deletion:

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 );

    Zoomed Image

    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.

    • 0