Canvas: Wie handle ich ctx.fillRect und transparence

Grüß Gott,

irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht. Warum?? Keine Ahnung.

ctx1.fillStyle = 'red';

ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

ctx1.fillRect(links,100,200,60);

ctx1.stroke();

Ich möchte dass Rechteck rot und davor die Schrift in Schwarz.

Und dann noch eine Frage.

ctx1.fillStyle = '#FB0716';

ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

ctx1.fillRect(links,100,200,60);

ctx1.stroke();

ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

ctx2.fillRect(links+250,100,100,60);

ctx2.stroke();

Genauso wenn ich am Anfang schreibe

ctx1.font = 20px Arial";

, dann haben alle

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var ctx1 = c.getContext("2d");

var ctx2 = c.getContext("2d");

var ctx3 = c.getContext("2d");

var ctx4 = c.getContext("2d");

20 px in Ariel?

Warum?????

LG

Jochen

warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?

LG

Jochen

Fehlte noch die Frage:

Und dann noch eine Frage.

ctx1.fillStyle = '#FB0716';

ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

ctx1.fillRect(links,100,200,60);

ctx1.stroke();

ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

ctx2.fillRect(links+250,100,100,60);

ctx2.stroke();

warum hat ctx2 die Farbe von ctx1 übernommen?

Sind doch zwei verschiedene Objekte , oder ????=

Vielleicht ist transparent nicht richtig. Ich möchte eine schwarze Schrift auf rotem Hintergrund haben.

So wie zum Beispiel hier auf dieser Seite on Top " HTML Seminar" auf blauem Hintergrund zu sehen ist.

zu weiter oben .

es gibt nur das einCanvas :

1. var c = document.getElementById("myCanvas");

muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,