Um eine Fläche mit Farbe füllen zu können, muss die Kontur der Fläche vorliegen. Diese könnte als Polygon definiert werden, was für gerundete geometrische Figuren wie das nebenstehende aber zu kompliziert wäre. Konturen können daher aus den bestehenden Grafik-Elementen zu einem Pfad zusammengesetzt werden, der dann gefüllt werden kann. Das generelle Vorgehen ist:
Solange ein Pfad offen ist, wird die Geometrie von Zeichenfunktionen nicht gezeichnet, sondern im Pfad zu einer Kontur zusammengesetzt. Der Pfad ist ein interner Speicher für geometrische Daten. Ist die Kontur komplett, kann der Pfad mit der Funktion Path() gezeichnet/gefüllt werden.
var jsg = NewGraph2D( { Width: 300, Height: 200 } ); jsg.SetLineAttr( '#CCC', 1 ); jsg.Grid( 20, 20 ); jsg.OpenPath(); jsg.ArcPt( 40, 60, 80, 20, 40 ); jsg.LineTo( 260, 20 ); jsg.LineTo( 260, 40 ); jsg.ArcTo( 260, 160, -60 ); jsg.LineTo( 260, 180 ); jsg.LineTo( 80, 180 ); jsg.ArcTo( 40, 140, 40 ); jsg.SetAreaAttr( 'yellow', 'red', 2 ); jsg.Path( 7 );
In diesem Beispiel wird die Kontur über 3 verschiedene Zeichenfunktionen aufgebaut und im Pfad gespeichert. Mit dem Aufruf in der letzten Zeile wird dieser Pfad geschlossen (Mode = 4), gefüllt (Mode = 2) und die Kontur gezeichnet (Mode = 1). Das Argument Mode = 7 kommt zustande, indem die 3 Werte addiert werden (7 = 1 + 2 + 4), siehe Funktion Path().