Signatur
Beschreibung
Die Eigenschaft HTMLCanvasElement.mozOpaque ist eine Firefox-eigene Erweiterung. Sie liest und setzt das HTML-Attribut moz-opaque des <canvas>-Elements. Hat sie den Wert true, weiß der Browser, dass die Zeichenfläche keine Transparenz enthält. Dadurch kann er beim Zusammensetzen der Seite (Compositing) Arbeit sparen, weil Inhalte hinter dem Canvas nicht berücksichtigt werden müssen.
Ist mozOpaque aktiv, wird das Canvas mit undurchsichtigem Schwarz statt mit transparenten Pixeln initialisiert. Halbtransparente Zeichenoperationen werden also gegen Schwarz gemischt, nicht gegen den Seitenhintergrund. Wenn Sie den Wert ändern, wird der Inhalt des Canvas gelöscht, genau wie beim Ändern von width oder height.
Die Eigenschaft ist veraltet und gehört zu keinem Standard. Stattdessen gibt es die standardisierte und browserübergreifende Option alpha: false beim Aufruf von canvas.getContext('2d', { alpha: false }). Sie hat dieselbe Wirkung und funktioniert in allen modernen Browsern. mozOpaque ist nur noch für älteren, Firefox-spezifischen Code von Bedeutung.
Rückgabewert
true, wenn das Attribut moz-opaque gesetzt ist, sonst false. In Browsern, die die Eigenschaft nicht kennen, ist der Wert undefined.Beispiele
Unterstützung prüfen und Wert auslesen
const canvas = document.createElement('canvas');
if ('mozOpaque' in canvas) {
console.log('mozOpaque unterstützt, aktueller Wert:', canvas.mozOpaque);
} else {
console.log('mozOpaque wird nicht unterstützt');
}Canvas als undurchsichtig kennzeichnen (Altcode für Firefox)
// HTML: <canvas id="spiel" width="320" height="240"></canvas>
const canvas = document.getElementById('spiel');
canvas.mozOpaque = true; // entspricht dem Attribut moz-opaque
console.log(canvas.hasAttribute('moz-opaque'));
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3366cc';
ctx.fillRect(0, 0, canvas.width, canvas.height);Empfohlene Alternative: Kontext mit alpha: false
const canvas = document.querySelector('canvas');
// Nicht standardisiertes mozOpaque vermeiden und den Standardweg nutzen
const ctx = canvas.getContext('2d', { alpha: false });
console.log(ctx.getContextAttributes().alpha);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);// Wichtig · Fallstricke
- Nicht standardisiert und veraltet: Die Eigenschaft gibt es nur in Firefox (Gecko). Chrome, Safari und Edge kennen sie nicht, dort ist der Wert
undefined. Neuere Firefox-Versionen unterstützen sie möglicherweise auch nicht mehr. Verwenden SiemozOpaquedaher nicht in Produktivcode. - Standardisierte Alternative:
getContext('2d', { alpha: false })bzw. für WebGLgetContext('webgl', { alpha: false }). - Inhalt geht verloren: Wenn Sie den Wert ändern, wird das Canvas zurückgesetzt. Setzen Sie ihn deshalb vor dem ersten Zeichnen.
- Schwarzer Hintergrund: Ein undurchsichtiges Canvas startet mit Schwarz. Füllen Sie den gewünschten Hintergrund selbst, sonst erscheinen halbtransparente Pixel dunkel.
- Mit Transparenz im Canvas (z. B. Überlagerungen über HTML-Inhalte) funktioniert die Option nicht, weil der Seitenhintergrund nicht mehr durchscheint.