javascript - キャンバス レクタングル ムーディー ボーダー

Question

キャンバスに四角形を描くと、不機嫌そうな境界線がフェードアウトします。境界線をシャープにしたいのですが、どうすればよいですか?

    ctx.fillStyle = "#CF0"
    ctx.fillRect(0,0,20,20)

Answer 1

キャンバスには、2 つの異なる独立したサイズがあります。

• 画面上のサイズ (.offsetWidthと.offsetHeight)
• ピクセル単位のサイズ (.widthおよび.height)

この 2 つが同一でない場合、グラフィックは不正確に見えます (ピクセル単位のサイズが小さいと、より具体的にはぼやけます)。

場合によっては (たとえば、Apple の "retina" ディスプレイ)、正確なレンダリングを行うには、画面上のサイズの正確に 2 倍のピクセル単位のサイズが必要です。