javascriptでcanvasタグ内の図形描画が綺麗にできない

Question

javascriptでcanvasタグ内に描画を行っているのですが
サンプルとして円を描画した時に輪郭線が画像を拡大した様にドットのようになってしまうのですが
どうすれば綺麗な輪郭線になるのでしょうか？

window.onload = function(){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
    ctx.beginPath();
	ctx.arc(50,50,20,0,Math.PI*2,false);
	ctx.stroke();
}

Answer 1

アンチエイリアスという処理が原因です。
参考: Wikipedia:アンチエイリアス
canvasの2dはアンチエイリアスがデフォルトで有効で、かつ、無効にできません。
(正確にはイメージ描画drawImage()だけ無効にすることができますが、普通の線は無理です。)
アンチエイリアスを無効にしてシャープネスな線を動的に引きたい場合は、下記二つの方法が考えられます。
0. canvasではなく描画領域はSVGを用い、JavaScirptでSVGの中身を動的に変更する。
0. canvasの2dではなくwebglで2次元な画像を描く。(IE10以下はwebglに対応していないので注意)
SVGであればJSライブラリもいくつかあるようですので、それらを使うのが現実的かと思います。