canvasの座標

HTML5 の <canvas> 要素

canvas の線

canvas で line（線）を引くとデフォルトでlineWidth = 1.0 になっているのに、ブラウザ上では2pxの薄い線が引かれたように見える。

なぜか？

これは、canvasの座標は(OpenGL風の) x,y,z 軸のあるグラフ空間の座標で、画面上の1ピクセルと対応した座標ではないからだ。

(x,y) = (5,0) から (5,100) に引いた、Y軸と平行な線はx=5の線と重なる。これをブラウザに写すと、(4, 0) ピクセルと (5, 0) ピクセルにまたがった位置から Y = 100 まで線を引くことになる。幅1.0の線を2ピクセルの中間に引くので、x=4のピクセルとx=5のピクセルに半分ずつ色をつけて50%の濃度で色をつけた線をY=0からY=100まで、ブラウザに写すと(4, -1)ピクセルと(5, 0)ピクセルの境目から(4, 99)ピクセルと(5,100)ピクセルの境目まで線を引くことになる。2ピクセル幅に半分の濃さで。

つまり、canvasに指示する(0,0)の座標はブラウザ上のの左上隅の(0, 0)のピクセルの中のさらに左上隅を指しているのだ。

canvasの座標は数学的な概念の座標で、それをGPUやフレームバッファを使って実際に目に見える液晶の点にする間に座標の変換が起こっている。