HTML Canvas wird kreisförmig gelöscht und wird nicht vollständig gelöscht?

Question

So ziehe ich meinen Kreis:

var homeimg = document.createElement("img"); 
homeimg.src = "img/nav/home-inactive.png"; 
var homec = document.getElementById("home-canvas"); 
var homectx = homec.getContext("2d"); 
homectx.beginPath(); 
homectx.arc(85, 85, 85, 0, 2 * Math.PI); 
homectx.closePath(); 
homectx.shadowColor = "rgba(0, 0, 0, 0.3)"; 
homectx.shadowOffsetX = 2; 
homectx.shadowOffsetY = 2; 
homectx.shadowBlur = 3; 
homectx.drawImage(homeimg, 0, 0, 170, 170); 
homectx.beginPath(); 
homectx.arc(0, 0, 85, 0, 2 * Math.PI, true); 
homectx.clip(); 
homectx.closePath(); 
homectx.restore(); 

Wir erhalten diese: https://i.imgur.com/qhrDSyr.png

Dope. Jetzt möchte ich den Canvas löschen - wische ihn komplett sauber.

homectx.clearRect(0, 0, homec.width, homec.height); 

Dies nimmt ein kreisförmiges Stück aus der linken oberen Ecke: https://i.imgur.com/uqJ4rA9.png

Okay, keine große Sache. homec's Breite und Höhe sind beide 180px (und haben sich nie geändert), also stoße ich einfach auf, wenn wir in einer Kreisform von 0, 0 räumen - das sollte funktionieren.

homectx.clearRect(0, 0, 600, 600); 

Gleichgroße Stück verschwindet.

Was mache ich hier falsch? Wie lösche ich das?

Answer 1

@apemom, Sie Code homectx.clip() ist der Schuldige hier. Um besser zu verstehen, was ich meine, lesen Sie bitte diese Dokumentation darüber, wie canvas.clip() funktioniert.

http://www.w3schools.com/tags/canvas_clip.asp

Zitat: Der Clip() -Methode Clips eine Region von jeder Form und Größe von der ursprünglichen Leinwand.

Tipp: Sobald eine Region abgeschnitten wurde, wird die gesamte zukünftige Zeichnung auf die ausgeschnittene Region beschränkt (kein Zugriff auf andere Regionen auf der Zeichenfläche). Sie können jedoch den aktuellen Canvas-Bereich mit der Methode save() speichern, bevor Sie die clip() -Methode verwenden, und ihn jederzeit (mit der Methode restore()) jederzeit wiederherstellen.

Viel Glück!