const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 回転した矩形を描画
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// 座標変換行列を恒等行列にリセットする
ctx.resetTransform();

結果

通常の座標変換を続ける

座標変換した図形の描画が完了したら、他のレンダリングを行う前に resetTransform() を呼び出す必要があります。この例では、最初の 2 つの図形は歪め変換で描画され、最後の 2 つは恒等（通常の）変換で描画されています。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 歪めた矩形
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// 歪めていない矩形
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

結果

歪めた矩形は灰色で、歪めていない矩形は赤色です。

ポリフィル

setTransform() メソッドを使用して、現在の変換を恒等行列にリセットすることもできます。次のように記述します。

ctx.setTransform(1, 0, 0, 1, 0, 0);

仕様書

仕様書
HTML # dom-context-2d-resettransform-dev

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月11日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告