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

score 21 · Accepted Answer · answered Oct 02 '14 at 13:50

21

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>

answered Oct 02 '14 at 13:50

Adam Botley

672
7
14

This is what helped me. Do you know why it acts like that? – Zack Oct 07 '16 at 21:23
4

Because canvas draws per pixel, so you need to define the number of pixels within the canvas itself. CSS merely indicates the width/height in pixels, not the number of pixels actually within the canvas – Adam Botley Oct 10 '16 at 09:32
It would be good to add haw to do it programmatically with javaScript (to modify it for example on page resize) – TOPKAT Aug 11 '20 at 16:21

Cyril Wallis-Davy · Answer 2 · 2020-05-18T17:51:43.930

This post is not recent, but it helped me to solve my problem, but there is an error in the answer. When we initialize the height and width of the canvas, we don't pass a string with the unit "px", but just a string with number. Like this :

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

Ajouve : in your code you make one error, after correcting the error it works

 var game;

 function game (){

 this.initCanvas = function(){
     this.canvas = document.getElementById('canvas');
     this.ctx = this.canvas.getContext('2d');   
 }

 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();
 }
    // Here define your fonction for resizing canvas
     this.resize = function() {
     this.canvas.width = window.innerWidth;
     this.canvas.height = window.innerHeight;
 };

 this.run = function(){
     this.initCanvas();
     // Call your function here
     this.resize();
     this.draw1();
     this.draw2();
 }

}

   game = new game();

   game.run();

canvas arc too pixelated

2 Answers2

Linked