Problem ze zmianą wielkości canvas

Ostatnio przy pracy z <canvas> spotkałem się z problemem rozmazanego napisu. Tworząc napis w taki sposób jak w każdym kursie HTML5 czyli:

<canvas id="myCanvas"></canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

Otrzymywałem rozmazany napis, na którym było widać poszczególne piksele. Zacząłem więc szukać rozwiązania w google. Niestety szukałem czegoś związanego z właśnie czcionką oraz napisami. Po dłuższych poszukiwaniach okazało się jednak iż jest to nie wina czcionki lub ustawień funkcji, lecz wina złego wymiarowania całego elementu <canvas>.

canvas {

width: 500px;

height: 400px; }

Błędem było podanie jego wysokości (width) oraz szerokości (height) za pomocą stylów CSS (jak powyżej). Taki sposób podania wymiarów powoduje przeskalowanie całej wygenerowanej przez skrypty i wyświetlanej przez <canvas> bitmapy.
Skrypt pobiera wielkość <canvas> z argumentów WIDTH oraz HEIGHT znacznika <canvas> w samym HTML(u), rysuje je. Style zmieniają tylko rozmiar obiektu, nie powodując ponownego wygenerowania wyświetlanej bitmapy. Tak więc, aby uniknąć przeskalowania jej, należy tylko zmienić atrybuty width oraz HEIGHT znacznika <canvas>.
Można to oczywiście zrobić w samym HTML-u:

<canvas id="myCanvas" width="500" height="400"></canvas>

Lub w sktypcie:

var c=document.getElementById("myCanvas");

c.setAttribute("width", 500);

c.setAttribute("height", 400);