html5のcanvasでスマホブラウザ、PCブラウザ両方の解像度に対応したい。

html5のcanvasでゲーム見たいな物を試作中です。そこで質問です。現状下記コードで元が大きさ500,500を指定したcanvasをどっかで拾ったfitってmethodで画面いっぱいにcanvasを表示する様な目論見で実装しておりました。しかし、よくよく考えれば当たり前ですが、解像度が高いPCだと画面いっぱいにするとぼやけて表示されます。

そこで考えるわけですが、ぼやけ改善のために解像度が高い時と低い時でcanvasの大きさを変える様な実装が必要だと思うのです。しかし、そのやり方だと、それぞれで描画処理の座標とかも変えなきゃなんないですよね。そんな実装は大変なのでできればやりたくないです。良い方法があればご教示頂けないでしょうか。

html
1<html>
2<head>
3    <meta name="viewport" content="width=500,user-scalable=no">
4</head>
5<body>
6    <canvas id="canvas" width="500" height="500"></canvas>
7</body>
8</html>

javascript
1function draw() {
2  var canvas = document.getElementById("canvas");
3  var ctx = canvas.getContext('2d');
4  //フォント設定
5  ctx.font = "14px 'MS Gothic'";
6  ctx.fillText("teratail最高！", 10, 10);
7  // Canvas 要素のリサイズ
8  fit(canvas, canvas.parentNode, canvas.width / canvas.height);
9}
10
11// 親要素のサイズに合わせて対象要素をリサイズする関数
12function fit(element, parent, aspectRatio) {
13  var pw = parent.clientWidth,
14    ph = parent.clientHeight,
15    l = 0,
16    t = 0,
17    w = pw,
18    h = ph,
19    s = element.style;
20
21  // 位置とサイズを計算
22  if (isFinite(aspectRatio)) {
23    if (aspectRatio < pw / ph) {
24      w = ph * aspectRatio | 0;
25      l = pw - w >> 1;
26    } else {
27      h = pw / aspectRatio | 0;
28      t = ph - h >> 1;
29    }
30  }
31
32  // 要素のスタイルを変更
33  s.left = l + 'px';
34  s.top = t + 'px';
35  s.width = w + 'px';
36  s.height = h + 'px';
37}