Dokumentation (canvas.quaese.de)

Rechtecke - fillRect()

Die fillRect-Methode zeichnet ein gefülltes Rechteck, das durch die übergebenen Parameter spezifiziert wird. Die Füllung wird durch das Attribut fillStyle bestimmt.

fillRect

void fillRect(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.

fillRect()

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.fillStyle = "#fff"
    // objContext.fillStyle(55, 20, 40, 110);
    // objContext.fillStyle(20, 55, 110, 40);
    objContext.fillRect(55, 20, 40, 110);
    objContext.fillRect(20, 55, 110, 40);
  }else{
    // Sonstiger Code
  }
}

Mein Dank gilt Mario Klug, der mich bei der Ausgabe des Quellcodes zum Beispiel auf das Verwenden der Methode fillStyle statt fillRect hingewiesen hat.

Erläuterung

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