Má qualidade para 100% de largura e altura da tela

Question

Feb 06, 2014, 09:20 AM

Má qualidade para 100% de largura e altura da tela

Eu fiz um exemplo muito pequeno com tela, está disponível emJsFiddle:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #myCanvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    </style>
    </head>
    <body>
        <canvas id="myCanvas">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        <script>

            var canvas = document.getElementById( "myCanvas" );
            var context = canvas.getContext( "2d" );

            context.id = "myContext";
            context.beginPath();
            context.arc( 95, 50, 40, 0, 2 * Math.PI );
            context.stroke();

            setTimeout( function() { 
                var rectWidth = 150;
                var rectHeight = 75;
                context.fillStyle = "blue";
                context.fillRect( rectWidth / -2, rectHeight / -2, rectWidth, rectHeight );
            }, 2000 );

        </script> 
    </body>
</html>

Como você pode ver, o resultado da renderização tem uma qualidade muito baixa:

Então, eu estou pensando, como posso desenhar várias figuras usandoTela de pintura com boa qualidade, não quero desenhar em tamanho pequeno, quero desenhar em 100% do tamanho da página.

Então, talvez eu não tenha definido algum filtro anti-aliasing ou algo mais?

Obrigado!