1

I have been trying to print arc in the html page. How can i remove the already drawn arch from the page?. i have written the below code. 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1200" height="1000"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
/*ctx.beginPath();
ctx.arc(600,500,20, 0.5*Math.PI,2*Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(600,500,40, 0.5*Math.PI,2*Math.PI);
ctx.stroke();
*/
var radius=20;
for (i=0; i<10; i++)
{
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI);
  ctx.stroke();
  radius= radius+30;
}


</script> 

</body>
</html>

How can i achieve this?.

Robert
  • 2,603
  • 26
  • 25
DrunkenMaster
  • 1,218
  • 3
  • 14
  • 28
  • Making changes to html canvas content involves (1) clearing the canvas of its previous content--`context.clearRect` and then (2) redrawing all the currently desired content. – markE Dec 13 '14 at 16:26

2 Answers2

2

Call clearRect method:

ctx.clearRect(0, 0, 1200, 1000)

The four arguments are:

  1. axis-X of left top corner of the area to wipe
  2. axis-Y of left top corner of the area to wipe
  3. width of the area to wipe
  4. height of the area to wipe

So with this method, you could wipe either the whole canvas or just a certain part of it.

Leo
  • 13,428
  • 5
  • 43
  • 61
  • It is kind of superset remove, if i have another circle additionally, it wipes out both. does not it possible to clear only the arc? – DrunkenMaster Dec 13 '14 at 12:25
  • @user3796318 if this is your case, usual approach is to draw another arc at exactly the same position with the background color. However this can only be practical if the background is solid color. So another approach is... well, wipe the canvas and redraw things you still need. – Leo Dec 13 '14 at 12:27
  • Thanks for the reply ;). So the 'take away' point is not possible to clear the object that we generated with ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI); probably something like ctx.arcclear(..same parameter) ? :) – DrunkenMaster Dec 13 '14 at 12:33
  • @user3796318 As far as I know, nope. I have some friends develop web games with canvas, they all say it's like a pain in the ass. – Leo Dec 13 '14 at 12:38
2

If you want to remove the whole previously drawn image please take a look at the other anwers. In the comments OP made it clear that this is not what he was trying to achieve. So instead I will answer the intended question:

How do I un-stroke a path?

A bitmap is not a vector graphic. You cannot simply remove or modify things you've drawn previously. By drawing on a canvas you modify the pixel color values of its image data. If you need to undo things you have to maintain a separate data structure with the relevant data yourself.

For example you could create a copy of the image data before drawing something. Then you could return to this snapshot afterwards. HTMLCanvasElement#toDataURL returns the complete image as an url which you can use as the src of an image. Later you can draw this image on the canvas to revert all subsequent changes. HTMLCanvasElement#toBlob does about the same but it returns a blob. This might consume less memory but it's a little more inconvenient to use. The most convenient method is CanvasRenderingContext2D#getImageData. You can even use it to copy only a small part of the image. This is useful if you have a big canvas but only modify pixels in a small region.

Another way to make modifications undoable is by maintaining a detailed list of your steps. For example whenever you draw an arc you store the exact parameters as one entry in the list. steps.push({type: 'stroke', style: 'rgb(0,0,0)', shapes: [{type: 'arc', x: 600, y: 500, radius: radius, from: 0.5 * Math.PI, to: 2 * Math.PI}]}) You can remove, rearrange or modify the elements in this list any way you like and have all necessary information to draw the resulting image from scratch. Basically you've implemented just another vector graphic library.

Robert
  • 2,603
  • 26
  • 25
  • With clearRect context you can remove the previous drawed image – manufosela Jan 26 '20 at 17:42
  • @manufosela You are correct. You can wipe rectangular parts of the image with `clearRect`. But apparently this isn't what DrunkenMaster was trying to ask (remove a specific arch). Maybe I should this more clear. – Robert Jan 27 '20 at 11:46
  • True, it is interpretable as well. Thank you for your broader point of view :) – manufosela Jan 28 '20 at 14:08