[1] Web では、左上隅を原点とし、水平方向を X 軸、 垂直方向を Y 軸として右下が正の方向になる(平面)座標系を採用しています。

仕様書

文脈

[2] 次の場面でこの座標系が採用されています。

負

[3] 負の方向もありますが、制限もあります。

[4] 媒体素片では構文的に負の値は表現できません。

小数

[5] 座標上の値は基本的には画素単位となっていますが、 小数の座標も表現できることがあります。

[6] 媒体素片では構文的に画素単位または百分率単位に満たない値は表現できません。

Z 軸

[7] CSS では z-index 特性により前後方向を指定できます。 しかし X や Y とは違って無単位の値になっています。

[8] X や Y の軸とは違って前後方向に対して斜めに表示できません。

座標変換

[9] 画像写像は CSS による変形の結果に対する座標となっています。

[10] 媒体素片はアスペクト比の変換等の変形の結果に対する座標となっています。

具体的な座標系

[15] 次の座標系は、いずれも原点の左辺からのCSS画素数を X とし、 上辺からのCSS画素数を Y とするものです。

[18] 画面では、出力装置の左上隅が原点です。

[16] 次の機能で使われています >>14。

[21] マルチディスプレイ環境については、画面を参照。

[17] 窓窓 (Web)では、当該窓窓 (Web)の左上隅が原点です。

[19] 次の機能で使われています >>14。

円形画面の座標系

[20] 時計などの円形画面を持つ装置

関連

[22] 他に、地球座標枠や装置座標枠が使われます。

[27] PDF座標系は数学式。

歴史

[11] Bug 28029 – Mouse coordinates represented in CSS pixels do not account for retina displays with window.devicePixelRatio > 1. ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28029#c6

[12] Blink Coordinate Spaces - The Chromium Projects ( 版) https://www.chromium.org/developers/design-documents/blink-coordinate-spaces

[23] Clarify canvas coordinate system (annevk著, ) https://github.com/whatwg/html/commit/8f2146b82c395397a8a3076ec2d642599f06d726

[24] Canvas and CSS pixels · Issue #2854 · whatwg/html () https://github.com/whatwg/html/issues/2854

[25] Canvas and CSS pixels · Issue #2854 · whatwg/html () https://github.com/whatwg/html/issues/2854

[26] Editorial: clarify canvas coordinate system by annevk · Pull Request #2867 · whatwg/html () https://github.com/whatwg/html/pull/2867