HTML5 canvas anti-alias?

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/

javascript html5-canvas

Edit Report

1 Answer

Another thing is that you're stroking each time. So the first line is drawn most, whilst the second is drawn one less time, etc.

This also causes it to become ugly. You'd need to begin a new path and only stroke that one:

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.beginPath();
        ctx.moveTo(x,y)
        x += 1;
        y = 0.01 * x * x;
        ctx.lineTo(x, y);
        ctx.stroke();
    }, 100);
}

Compare:

It's also faster since less drawing is done.

answered 2011-05-17T14:36:03.300

HTML5 canvas anti-alias?

1 Answer

Your Answer