【JavaScript】translate()によるCanvasの座標変換。原点の位置を変更する方法

2026年6月26日

JavaScriptのCanvas APIのtranslate()メソッドを使い、キャンバスを座標変換する方法を解説します。

目次 [ close ]

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

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

jsにてコンテキストを取得します。

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

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。

まずは(0, 0)の位置に緑の正方形を描画します。

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 20, 20);

translate()メソッドを使うと、原点を別の位置に移動することができます。fillRect()の直前に以下のコードを追加します。

ctx.translate(40, 40);

translate(x, y)で指定した位置に原点が移動し、描画した図形の位置が変わりました。

save()、restore()を使うことでキャンバスの状態をリセットできるため、以下のようにすることでtranslate()による座標変換を元に戻すことができます。

ctx.save();
ctx.fillStyle = 'green';
ctx.translate(40, 40);
ctx.fillRect(0, 0, 20, 20);
ctx.restore();

ctx.fillRect(0, 0, 20, 20);

restore()でキャンバスの状態をリセットした後に描画した図形は(0, 0)の位置に描画され、色も黒にリセットされています。

resetTransform()を実行すると、座標変換のみリセットすることができます。コードを以下のように変更します。

ctx.fillStyle = 'green';
ctx.translate(40, 40);
ctx.fillRect(0, 0, 20, 20);

ctx.resetTransform();
ctx.fillRect(0, 0, 20, 20);

座標空間のみリセットされ、色の指定は保持されているのがわかります。