html5のcanvasでscaleを変更する場合の注意点を一つ紹介。
context.scale(2, 2);
としたときに、スケールをオリジナルの２倍にするという考えは間違いで、実際はスケールを今の２倍にするという意味になるようです。
言葉で表現し難いですね。
オリジナルではなくcotext.scale()でスケールを変更するときが基準になるんです。
たとえば、以下のように、
context.scale(2, 2);
context.scale(2, 2);
最初に設定したスケールの２倍になっていると思うのは間違いで、4倍（２倍×２倍）になるみたい・・。
別の例を示すと、
context.scale(2, 2);
context.scale(1, 1);
これは最初のスケールと比べると２倍のまま（２倍×１倍）なんです。
「じゃあスケール変えたら戻せないじゃん！」
と思うかもしれないけど、戻す方法はあって、
context.scale(2, 2);
context.scale(1/2, 1/2);
というふうに、scaleに逆数を指定してしまえばオリジナルのスケールに戻ります。
でもこれって、計算結果が端数になった場合、思ったとおりに戻らない可能性があるわけで・・。
ゆえにsaveとrestoreメソッドを使うのがおすすめです。
save()を呼び出すと、その時のcontextの状態（スケールや線の太さ、色などなど）を保存
restore()を呼びだすと、最後にsaveした状態に戻る
つまり、
context.save()
context.scale(2, 2);
context.restore()
ってやると、スケールを変更する前の状態をsaveしたので、restoreを呼び出したときにスケールが１倍に戻るってことです。
contextの状態を戻せるsaveとrestoreのコンボは便利なので色々と活用！
