Question

I’m trying to draw a quadratic curve with canvas. Here is the code:
HTML:

<canvas id="mycanvas"> 
    Your browser is not supported.
</canvas> 

JavaScript:

var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var x = 0,
        y = 0;
    setInterval(function() {
        ctx.lineTo(x, y);
        ctx.stroke();
        x += 1;
        y = 0.01 * x * x;
    }, 100);
}

But the result is really ugly, first, the lines are too thick, second, the alias is so obvious…. how could I improve it?
You can see the effect here: http://jsfiddle.net/7wNmx/1/

Answer 1

What you’re doing is creating a canvas which is the default size, 300 by 150, and then scaling it up using CSS to 1000px by 1000px. But scaling it up like that just magnifies the size of the pixels, it doesn’t increase the resolution of the canvas itself. What you need to do is set the actual dimensions of the canvas itself using the width and height attributes:

<canvas width="1000" height="1000" id="mycanvas"> 
    Your browser is not supported.
</canvas>

Then you don’t need to scale it up by setting canvas.style.width and height any more.