Trazados en HTML5

En el anterior ejercicio se había utilizado por primera vez la etiqueta canvas y se había logrado realizar un dibujo retangular con un color de relleno definido. En esta oportunidad vamos a realizar una tarea adicional en dibujo con HTML5 y nos refirimos a realizar los trazados de línea.

Vamos a dibujar la letra "H" y la letra "O" con trazos de línea y el código es el que sigue:

<!DOCTYPE html>
<html>
<head>
 <title>
  Trazados en html5
 </title>
</head>
<body>
 <canvas id="hola" width="130px" height="100px" style="border:1px solid black">
  
 </canvas>
 <script >
      var c=document.getElementById("hola");
      var cxt=c.getContext("2d");

      cxt.moveTo(10,10); //movemos el puntero al punto x=10, y=10
      cxt.lineTo(10,90); //trazamos una linea al punto x=10, y=90
      cxt.lineTo(10,50);
      cxt.lineTo(30,50);
      cxt.lineTo(30,10);
      cxt.lineTo(30,90);

      cxt.moveTo(40,10); // movemos el puntero al punto x=40, y=10
      cxt.lineTo(40,90);
      cxt.lineTo(60,90);
      cxt.lineTo(60,10);
      cxt.lineTo(40,10);

      cxt.stroke();
 </script>
</body>
</html>