Tamaño de canvas dinámico

garciasanchezdani · #1 (**permalink**) 06/06/2012, 01:50

Buenos días

Estoy utilizando el elemento canvas en una app web, en concreto 5 canvas, que son 5 circunferencias, lo he implementado de la siguiente manera:

Los he definido en mi <body>

Código HTML:

Ver original<canvas id="canvas" width="150" height="150">
        El dispositivo no soporta canvas en su navegador.
</canvas>
<canvas id="canvasSupIzq" width="150" height="150">
        El dispositivo no soporta canvas en su navegador.
</canvas>
<canvas id="canvasSupDer" width="150" height="150">
        El dispositivo no soporta canvas en su navegador.
</canvas>
<canvas id="canvasInfIzq" width="150" height="150">
        El dispositivo no soporta canvas en su navegador.
</canvas>
<canvas id="canvasInfDer" width="150" height="150">
        El dispositivo no soporta canvas en su navegador.
</canvas>

En el <script>, obtengo el elemento canvas ( document.getElementById ); después obtengo el contexto ( .getContext('2d') ). Cuando tengo el contexto, dibujo el canvas así:

Código Javascript:

Ver originalctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI*2, true); 
ctx.fillStyle = '#00A8D9';
ctx.strokeStyle = 'white';
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.font         = '60px sans-serif';
ctx.fillStyle = 'black';
ctx.fillText('1', 57, 95);  
ctx.strokeStyle = 'black';
ctx.strokeText('1', 57, 95);

Por otro lado, estoy controlando el posicionamiento en la pantalla, de mis 5 elementos canvas, mediante media queries...lo que necesito saber es cómo podría aumentar el tamaño, etc ( acceder a la api de canvas ) en relación con el tamaño de la pantalla...

Muchas gracias por adelantado, Daniel