(2009-2022/07)
動作     : Edge101, Firefox95, Chrome96

・ここでは直線を4本を引いて四角形を描画しています。

  例:
  //線をつないでいく。
  context.beginPath();
  context.moveTo(x1,y1); 
  context.lineTo(x2,y2);
  context.lineTo(x3,y3);
  ...
  context.closePath();
  //最後に描く
  context.stroke();

・canvasで線を引くとにじんだ線になる。
  座標が整数値で lineWidth = 1 の線を引くと、1ピクセルの線にな
　らずにじんだ線になり、色も指定した色よりも淡くなります。

  canvasでは物理的な画面に線を引くのではなくて、ディスプレイの
　画素密度(ppi)に関係なく抽象化された論理ディスプレイに描くと
　いう考え方のためこうなります。

  でも、実際のところ、これだと不都合な場合もあるので・・・
  線を描く座標を 0.5 ほどずらして小数値にすると 1ピクセルの線に
　なります(ただし、Windows の場合)。参考程度の話。

・関連:
  MDN:canvas に図形を描く
  MDN:lineTo()