下図のように、白い親キャンバスの内部に灰色の子キャンバスを設定します。
親キャンバスは、xycoordinateに従うｘ－ｙ座標系とし、子キャンバスは目盛りの異なるｕ－ｖ座標系です。
ｕ－ｖ系での（ｕ, ｖ）をキャンバスに描画するときの（ｘ, ｙ）を計算することが目的です。
| 変数（横軸, 縦軸) | ここでの値 | 意味 |
| xmin, ymin | -1, -0.5 | 親ウインドウの左下のx-y座標 |
| xmax, ymax | 4, 3.5 | 同上。右上のx-y座標 |
| xumin, yvmin | 0.3, 0.7 | 点Ａのx-y座標 |
| xumax, yvmax | 3.8, 3.2 | 点Ｂのx-y座標 |
| umin, vmin | -20, -20 | 点Ａのu-v座標 |
| umax, vmax | 50, 30 | 点Ｂのu-v座標 |
| xs, ys | 1, 1 | x-y座標での補助線刻み |
| us, vs | 10, 10 | u-v座標での補助線刻み |
| u, v | 20, 10 | 与えた青点のu-v座標 x-y座標では (2.3, 2.2) であることは図より明白 |
x = utox(u); y = vtoy(v); として計算できます。
var utox = function(u) {
return (u-umin)*(xumax-xumin)/(umax-umin) + xumin;
}
var vtoy = function(v) {
return (v-vmin)*(yvmax-yvmin)/(vmax-vmin) + yvmin;
}