CanvasRenderingContext2D definiert vier Methoden zum Zeichnen von Rechtecken. Listing 1.4 nutzt eine davon, fillRect(), um die Kontrollpunkte der Bézierkurven zu markieren. Alle vier Rechteckmethoden erwarten zwei Argumente, die eine Ecke des Rechtecks angeben, sowie zwei, die die Breite und die Höhe des Rechtecks angeben. Üblicherweise geben Sie die linke obere Ecke an und dann eine positive Breite und Höhe, aber Sie können auch andere Ecken und negative Maße bestimmen.

fillRect() füllt das angegebene Rechteck mit dem aktuellen fillStyle. strokeRect() zieht den Umriss des angegebenen Rechtecks mit dem aktuellen strokeStyle und anderen Strichattributen. clearRect() ist wie fillRect(), ignoriert aber den aktuellen Füllstil und füllt das Rechteck mit transparenten schwarzen Pixeln (der Standardfarbe eines vollständig leeren Canvas). Das Wichtige an diesen drei Methoden ist, dass sie sich nicht auf den aktuellen Pfad oder den aktuellen Punkt auf diesem Pfad auswirken.