Farben für unser Canvas-Element

Über die Anweisung strikeStyle können wir eine Farbe mitgeben. Hier können alle gewohnten Angaben genutzt werden, von den RGB-Werten bis zur hexadezimalen Schreibweise. Wir wollen unsere Zickzack-Line in der Farbe Rot erhalten – also in der Farbe „#ff0000“;

Farbe für Linien

c.beginPath();
c.moveTo(50, 200);
c.lineTo(150, 120);
c.lineTo(170, 160);
c.lineTo(200, 100);
c.strokeStyle = "#ff00000";
c.stroke();

Farbe für Rechtecke

Für unser Rechteck benötigen wir als Farbangabe die Anweisung fillStyle = . Hier nutzen wir als Farbangabe die HSLA-Variante (für den Aufbau der Farbe siehe https://www.html-seminar.de/css3-farben-mit-transparenz-hsla.htm)

c.fillStyle = 'hsla(0, 50%, 50%, 0.5)';
c.fillRect(50, 50, 75, 75);

Transparenz

Der letzte Wert gibt die Transparenz an.

Wir können bei unseren Rechtecken für jedes eine andere Farbe angeben. Es wird immer die Farbe genutzt, die zuletzt angegeben wurde.

c.fillStyle = 'hsla(0, 50%, 50%, 0.5)';
	c.fillRect(50, 50, 75, 75);
c.fillStyle = 'hsla(120, 50%, 50%, 0.5)';
	c.fillRect(100, 50, 90, 90);
	c.fillRect(50, 100, 100, 50);

Im letzten Beispiel erhalten wir so ein rotes Rechteck und dann wird die Farbe umgestellt und die weiteren 2 Rechtecke erhalten die zweite Farbe.