canvas要素で楕円を描画する方法

※2016/08更新 ellipseメソッドがだいたい使えるようになったよ！やったね！
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/ellipse


現状では楕円を描画するellipseといった関数はcanvas要素のapiには備わっていないわけで，どうやって楕円を描こうかと悩ましいところですが，scaleメソッドを使った方法が最も簡単かと思われます．

通常楕円は円を何れかの方向に引き伸ばすことで作り出すことができます．従ってscaleメソッドで座標軸を引き伸ばすことでarcメソッドのみで楕円を描くことができるはずです．では試してみましょう．




楕円の描画サンプル失敗例
確かに楕円は描けました．しかしstrokeメソッドによる線の太さが変化してしまい見た目が悪いと言った現象が発生してしまいます．

これはstrokeメソッドを実行したタイミングでscaleメソッドの内容が有効となっているために発生しており，この内容を元の値に戻すことで円の形のみを楕円に変形することが可能となります．では試してみましょう．

楕円の描画サンプル

このように線の太さを変えること無く楕円を描画することが出来ました．

var canvas = document.getElementById("canvas_ellipse");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.translate(100,100);
//現在の状況を一旦保存
ctx.save();
ctx.scale(2,1);
ctx.arc(0,0,40,0,Math.PI*2);
ctx.restore();
ctx.lineWidth = 5;
ctx.stroke();