miércoles, 31 de octubre de 2012

Compatibilidad con el Canvas


Buenas a todos!!
Comprobar la compatibilidad del navegador con el Canvas es muy simple:

<html>
   <head><title>Compatibilidad canvas</title></head> 
   <body>
   <canvas id='c'>Canvas no soportado!</canvas>
   <script languaje="JavaScript">
      var canvas;
      var ctx;
      var WIDTH = 480;
      var HEIGHT = 320;
      function init() {
         canvas = document.getElementById('c');
         if(canvas.getContext){
            canvas.width = WIDTH;
            canvas.height = HEIGHT;
            ctx = canvas.getContext('2d');
            ctx.fillStyle = '#73CC00';
            ctx.beginPath();
            ctx.rect(0, 0, WIDTH, HEIGHT);
            ctx.closePath();
            ctx.fill();
         }else{
            alert("Canvas no soportado!");
         }
      }
      window.onload = init;
      </script>
   </body>
</html>

Cuando recogemos un elemento <canvas>, si comprobamos que contiene la función getContext, entonces significa que es compatible, en caso contrario el navegador no da soporte al canvas.


canvas = document.getElementById('c');
if(canvas.getContext){
   //Soporta el canvas
}else{
   //No soporta el canvas
}

El texto que incluimos entre los tags <canvas>, será visible en caso de que el navegador no de soporte al canvas.

<canvas id='c'>Canvas no soportado!</canvas>

Así de fácil! Un saludete!