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 id="canvasSupIzq" width="150" height="150"> El dispositivo no soporta canvas en su navegador.
<canvas id="canvasSupDer" width="150" height="150"> El dispositivo no soporta canvas en su navegador.
<canvas id="canvasInfIzq" width="150" height="150"> El dispositivo no soporta canvas en su navegador.
<canvas id="canvasInfDer" width="150" height="150"> El dispositivo no soporta canvas en su navegador.
- 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