canvas arc too pixelated

Question

I try to draw an circles in canvas, I ever do it before but i found it very pixelated this time

var game;

function game (){

    this.canvas = document.getElementById('canvas');

    this.ctx = this.canvas.getContext('2d');



    this.initCanvas = function(){

    }

    this.draw1 = function(){
        this.ctx.beginPath();
        this.ctx.arc(50, 75, 10, 0, Math.PI*2, true); 
        this.ctx.closePath();
        this.ctx.fill();
    }

    this.draw2 = function(){
        this.ctx.beginPath();
        this.ctx.arc(100,75,10,0,Math.PI*2,true);
        this.ctx.closePath();
        this.ctx.stroke();
    }

    this.run = function(){
        this.initCanvas();
        this.draw1();
        this.draw2();
    }

    window.onresize = function() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    };
}

game = new game();

http://jsfiddle.net/RG6dn/6/

I don't know if this is due to the browser ( I have the same thing on chrome and firefox ) or my computer

Thanks

Answer 1

You probably were setting the width of your canvas using CSS. Altering the width of a canvas element in CSS stretches the pixels within the canvas

Eg.

<canvas style='width:400px;height:400px'></canvas>

Instead, you need to use the width and height properties of the canvas element itself to define how many pixels the canvas contains.

Correct way:

<canvas width='400px' height='400px'><canvas>