HTML5. ¿Gráfico en un canvas usando javascript?

   Para mi gusto no, ¿porqué?, porque me parece demasiado engorroso. Yo prefiero crear el dibujo en cualquier programa, Gimp por ejemplo que, además, es gratuito y cargarlo en la página. No obstante, para ilustrar el ejemplo de creación de dibujos en un canvas usando javascript, en la página Las Edades de la Tierra, en la sección "Enlaces de interés", abajo del todo tengo un enlace llamado "ver gráfico de escala geológica", si pincháis sobre él se abrirá una ventana, esta ventana es un canvas que contiene un gráfico realizado en javascript. Ahora os comento como se realiza esto.

   En primer lugar el código en HTML5:

   <canvas id="migrafico">Tu navegador no soporta Canvas</canvas>

   El HTML es así de sencillo, una sola línea. El texto "Tu navegador no soporta Canvas" sólo aparecerá en el caso de que el navegador no soporte esa función. Tenemos que darle un id para poder dibujar dentro del canvas y, en este caso, también para abrir y cerrar la ventana.

  Llamamos a la visualización del gráfico mediante el último enlace que veis en "Enlaces de interés". La línea en HTML es como sigue:

   <div id="abrecierracanvas"><h2>Ver gráfico de escala geológica</h2></div>

   La línea en sí no parece un enlace pero le damos la apariencia con CSS:
      #abrecierracanvas h2 {
display:block!important;
cursor: pointer;
-webkit-transition:-webkit-transform 300ms ease-out;
transition:transform 300ms ease-out;
color:#0FF;
font-size:0.9em;
text-decoration:underline;
      }

   Y, con el siguiente código, en jQuery, hacemos la ventana visible o invisible:

      <script type="text/javascript">
         $(document).ready(function(){  //cuando la página esté cargada
             //localizamos el div con id abrecierracanvas, y... 
            $('#abrecierracanvas').on('click','h2', function() {//...si hacemos click en el texto con la etiqueta h2
                //...ejecutamos la función que sigue:
           var $canvas=$('#migrafico'); //localizamos el canvas con id migráfico
           if ($canvas.is(':hidden')) {  //Si el gráfico está oculto
$canvas.slideDown('100'); //lo abrimos con un efecto
                           //y cambiamos el texto de ver el gráfico por Ocultar el gráfico
$('#abrecierracanvas h2').text("Ocultar gráfico de escala geológica");
} else {  //en caso contrario (significa que ya está abierto)
$canvas.slideUp('100');  //lo cerramos con un efecto
                          //y restauramos el texto original
$('#abrecierracanvas h2').text("Ver gráfico de escala geológica");
}

            });
         })
      </script>

   Y, ahora, lo más tedioso, dibujar el gráfico en javascript:

 <script type="text/javascript">
 var canvas = document.getElementById("migrafico");
 var ctx = canvas.getContext("2d");
ctx.moveTo(10,80);
ctx.lineTo(10,120);
ctx.lineTo(290,120);
ctx.lineTo(290,80);
ctx.moveTo(10,120);
ctx.moveTo(253,120);
ctx.lineTo(253,80);
ctx.moveTo(253,120);
ctx.moveTo(273,120);
ctx.lineTo(273,80);
ctx.moveTo(273,120);
ctx.moveTo(285,120);
ctx.lineTo(285,80);
ctx.strokeStyle = "#fff";
ctx.stroke();
ctx.font = '12px Verdana';
ctx.fillStyle="#00FFFF";
ctx.fillText("1.Precámbrico",10,20);
ctx.fillText("2.Paleozoico",10,32);
ctx.fillText("3.Mesozoico",10,44);
ctx.fillText("4.Cenozoico",10,56);
ctx.fillText("1",120,100);
ctx.fillText("2",258,100);
ctx.fillText("3",275,100);
ctx.fillText("4",285,100);
</script>

   Por esto soy partidario de, simplemente, cargar una imagen dentro de la página. Como podéis ver demasiado código para tan poca cosa. Y yo, de momento, no sé la utilidad que tiene.