¿Cómo puedo borrar un arco o círculo en el canvas HTML5?

Descubrí que hay un método clearRect() , pero no puedo encontrar ninguno para borrar un arco (o un círculo completo).

¿Hay alguna manera de borrar un arco en el canvas?

No, una vez que dibujas algo en un canvas, no hay ningún object que limpiar, solo los píxeles que dibujaste. El método clearRect no borra un object dibujado previamente, simplemente borra los píxeles en el espacio definido por los parameters. Puede usar el método clearRect para borrar el arco si conoce un rectángulo que lo contiene. Esto, por supuesto, eliminará cualquier otro píxel en el área, por lo que tendrá que volver a dibujarlos.

Editar: MooGoo ha dado una respuesta mucho mejor a continuación

No hay clearArc sin embargo, puede usar Composite Operations para lograr lo mismo

 context.globalCompositeOperation = 'destination-out' 

Según MDC, el efecto de esta configuration es

El contenido existente se mantiene donde no se superpone a la nueva forma.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Por lo tanto, cualquier forma rellena con este modo finalizará borrando el contenido del canvas actual.

Puede usar el método clearRect () para borrar una parte del canvas (incluido su arco), pero cuando usa clearRect () con arcos o cualquier otra cosa que haya utilizado beginPath () y closePath () para dibujar, usted Tendrás que manejar las routes mientras borras también. De lo contrario, puede terminar con una versión descolorida de su arco que aún aparece.

 //draw an arc (in this case, a circle) context.moveTo(x, y); context.beginPath(); context.arc(x,y,radius,0,Math.PI*2,false); context.closePath(); context.strokeStyle = "#ccc"; context.stroke(); //now, erase the arc by clearing a rectangle that's slightly larger than the arc context.beginPath(); context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2); context.closePath(); 

Este es un equivalente circular de clearRect() . Lo principal es configurar una operación compuesta por la respuesta de @moogoo.

 var cutCircle = function(context, x, y, radius){ context.globalCompositeOperation = 'destination-out' context.arc(x, y, radius, 0, Math.PI*2, true); context.fill(); } 

Ver https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html :

Aquí hay un violín actualizado para ti también (usa clearRect): https://jsfiddle.net/x9ztn3vs/2/

Tiene una clara function Apple:

 block.prototype.clearApple = function() { ctx.beginPath(); ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI); ctx.closePath(); }