Bad quality for 100% both width and height of canvas

Question

I have done a very tiny example with canvas, it\'s available on JsFiddle:

http://jsfiddle.net/yPtr5/

Answer 1

The height and width need to be set on the height and width attributes of the canvas tag and not in CSS. Any CSS sizing of the canvas element merely stretches the canvas and does not size it properly.

Have a look at this project that I posted on my site: Creating an HTML5 Paint App

It includes a functionto resize the canvas when the browser window size changes (which you would have to modify):

        this.onScreenSizeChanged = function (forceResize) {
        if (forceResize || (this.canvas.width != window.innerWidth /*|| 
                            this.canvas.height != window.innerHeight*/)) {

            var image = this.context.getImageData(0, 0,
                    this.canvas.width, this.canvas.height);

            this.canvas.width = (window.innerWidth);
            this.canvas.height = (window.innerHeight);

            this.context.putImageData(image, 0, 0);

        }
    }
    this.onScreenSizeChanged(true);