Text Is Grainy/blurry When Drawing Text On A Canvas Via Onload

If I try to draw text to my canvas at the onload event, the text shows up blurry. I draw to the same canvas later via a button click from another function and it's fine. But if I

Solution 1:

There may be some problem with the

ctx.fillText('hello...', c.width/2, c.height/2);

Because if you for example set width of the canvas with css then c.width and c.height will be the default size for the canvas which is, 300x150 and not the size defined in css. Try to set two variables for the width and height that are global for your application. E.g

var canvasWidth = 400;
var canvasHeight = 200;
c.width = canvasWidth;
c.height = canvasHeight;
/* ... */

and then later in your code you can use canvasWidth and canvasWeight:

ctx.fillText('hello...', canvasWidth/2, canvasHeight/2);

Take a look at this test: http://jsfiddle.net/EsQfb/7/ it's important to use use the canvas.width and not canvas.style.width in your case.

Take a look at this for more information about this: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width