[GELÖST] canvas fill problem

[salazar]

Hi,

ich habe ein Array mit point objects drin. Jeder point hat die Eigenschaften x und y. Ich ordne diese Points in einem Rechteck an. Ein paar dieser Points können, wenn die Distanz zur Maus einen definierten Radius unterschreitet, der Maus folgen. Dadurch entsteht Bewegung und die Form des Rechtecks wird deformiert. Soweit so gut.
Ich würde dieses Rechteck aber nun gerne mit Farbe füllen. Und genau hier komme ich nicht weiter. Linien zeichnen usw. klappt einwandfrei.

Ganz zu Beginn wende ich clearRect an, damit die alten Zeichnungen verschwinden:

ctx.clearRect( 0, 0, 780, 780 );

Danach dann folgt:

ctx.beginPath();

Jetzt kommt eine for-Schleife in der die oben schon beschriebene Bewegung für die points berechnet wird. Innerhalb dieser for-Schleife habe ich diesen Code hier:

ctx.moveTo( pointL.x, pointL.y );
ctx.quadraticCurveTo( point.x, point.y, pointR.x, pointR.y );

Und nach der for-Schleife dann:

ctx.lineWidth = 1;
ctx.fillStyle = '#666666';
ctx.fill();
ctx.strokeStyle = 'white';
ctx.stroke();

Und so schaut das Ergebnis aus:


Wieso wird nicht das Rechteck gefüllt? ich stehe mal wieder auf dem Schlauch.
Vielen Dank für eure Hilfe

- - - Aktualisiert - - -

Hi,
Problem gelößt.
Es war natürlich das moveTo, das innerhalb der for-Schleife X mal ausgeführt worden ist.