CanvasRenderingContext2D.resetTransform() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.resetTransform()

Beschreibung

resetTransform() setzt die Transformationsmatrix des Canvas-2D-Kontexts auf die Einheitsmatrix zurück. Die Methode entspricht dem Aufruf ctx.setTransform(1, 0, 0, 1, 0, 0). Danach entspricht ein Punkt (x, y) wieder genau dem Canvas-Pixel (x, y).

Das ist praktisch, wenn Sie vorher mit translate(), rotate(), scale() oder transform() das Koordinatensystem verändert haben und danach wieder im ursprünglichen Koordinatensystem zeichnen wollen. Ein typischer Fall ist das Leeren der gesamten Zeichenfläche mit clearRect() in einer Animationsschleife: Ist noch eine Transformation aktiv, wird sonst womöglich nur ein Teil gelöscht.

Anders als save()/restore() betrifft resetTransform() nur die Transformationsmatrix. Andere Zustände wie fillStyle, lineWidth, globalAlpha oder Clipping-Bereiche bleiben erhalten. Einen vorher gespeicherten Zustand stellt die Methode auch nicht wieder her, sie setzt die Matrix einfach auf die Einheitsmatrix.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Transformation nach dem Zeichnen aufheben

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// Gedrehtes Rechteck zeichnen
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.fillStyle = 'tomato';
ctx.fillRect(-25, -25, 50, 50);

// Zurück ins normale Koordinatensystem
ctx.resetTransform();
ctx.fillStyle = 'steelblue';
ctx.fillRect(10, 10, 40, 40); // liegt exakt oben links

console.log(ctx.getTransform().isIdentity);

true

Ganze Zeichenfläche in einer Animationsschleife leeren

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let angle = 0;

const draw = () => {
  // Vor dem Löschen Matrix zurücksetzen, sonst wird nur ein transformierter Bereich gelöscht
  ctx.resetTransform();
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle);
  ctx.fillRect(-30, -30, 60, 60);

  angle += 0.02;
  requestAnimationFrame(draw);
};

requestAnimationFrame(draw);

HiDPI-Skalierung nach dem Reset wiederherstellen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;

canvas.width = 300 * dpr;
canvas.height = 150 * dpr;
canvas.style.width = '300px';
canvas.style.height = '150px';

const resetToBase = () => {
  ctx.resetTransform();
  ctx.scale(dpr, dpr); // Basis-Skalierung für scharfe Darstellung erneut setzen
};

resetToBase();
ctx.translate(50, 50);
ctx.fillRect(0, 0, 20, 20);

resetToBase();
ctx.fillRect(0, 0, 20, 20); // wieder in CSS-Pixeln ab (0, 0)

// Wichtig · Fallstricke

Setzt alles zurück, auch gewollte Grund-Transformationen: Eine Skalierung mit devicePixelRatio für HiDPI-Displays geht dabei ebenfalls verloren. Setzen Sie sie danach neu oder arbeiten Sie stattdessen mit save()/restore().
Nur die Matrix: Stile, Clipping-Bereiche und der aktuelle Pfad bleiben unverändert. Punkte eines bereits begonnenen Pfads wurden schon beim Hinzufügen transformiert und bleiben dort, wo sie sind.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der Internet Explorer kennt die Methode nicht. Dort funktioniert der gleichwertige Aufruf ctx.setTransform(1, 0, 0, 1, 0, 0). Auch in OffscreenCanvasRenderingContext2D ist sie verfügbar.
Nicht verwechseln mit ctx.reset() (neuer): Diese Methode setzt den gesamten Kontextzustand zurück und leert die Zeichenfläche.

Siehe auch

CanvasRenderingContext2D.setTransform() CanvasRenderingContext2D.getTransform() CanvasRenderingContext2D.transform() CanvasRenderingContext2D.translate() CanvasRenderingContext2D.rotate() CanvasRenderingContext2D.scale() CanvasRenderingContext2D.save() CanvasRenderingContext2D.restore() CanvasRenderingContext2D