HTML5 canvas anti-alias?

Я пытаюсь рисовать квадратную кривую с холстом. Вот код:
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);
}

Но результат действительно уродлив, во-первых, линии слишком толстые, во-вторых, псевдоним настолько очевиден... как я могу его улучшить?
Вы можете увидеть эффект здесь: http://jsfiddle.net/7wNmx/1/

Ответ 1

Что вы делаете, так это создание холста, размер по умолчанию - 300 на 150, а затем его масштабирование с использованием CSS до 1000 пикселей на 1000 пикселей. Но масштабирование этого типа просто увеличивает размер пикселей, оно не увеличивает разрешение самого холста. Что вам нужно сделать, это установить фактические размеры самого холста, используя атрибуты width и height:

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

Тогда вам не нужно масштабировать его, установив canvas.style.width и height.

Ответ 2

Другое дело, что вы поглаживаете каждый раз. Таким образом, первая строка больше всего рисуется, а вторая - на меньшее время и т.д.

Это также заставляет его становиться уродливым. Вам нужно будет начать новый путь и только погладить его:

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);
}

Для сравнения:

Это также быстрее, поскольку выполняется меньшее рисование.