Dokumentation (canvas.quaese.de)

Rechtecke - clearRect()

Die clearRect-Methode löscht alle Pixel innerhalb des angegebenen Rechtecks. Schnittstellen mit dem Clipping-Pfad werden transparent, zuvor gezeichnete Bilder werden gelöscht.

clearRect

void clearRect(x, y, width, height)

Die Methode erwartet vier Parameter.

Parameter

x - horizontale Start-Koordinate

y - vertikale Start-Koordinate

width - Breite des Rechtecks

height - Höhe des Rechtecks

Schematische Darstellung

Die folgende Skizze veranschaulicht die übergebenen Parameter.

clearRect()

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    objContext.fillStyle = "#c00";
    objContext.fillRect(10, 10, 130, 130);
    objContext.clearRect(55, 20, 40, 110);
    objContext.clearRect(20, 55, 110, 40);
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Als erstes wird der Füllstil geändert und ein rot gefülltes Quadrat gezeichnet. Anschließend werden zwei Rechtecke aus dem bestehenden gelöscht, so dass der Eindruck eines Kreuzes entsteht.