HTML5: pizarra con canvas y JavaScript

HTML5: pizarra con canvas y JavaScript

Etiquetas: canvas strokeStyle beginPath stroke lineTo

Una de las novedades de HTML5 es la etiqueta <canvas>. Esta etiqueta permite crear dinámicamente formas y elementos 2d. En este ejemplo, crearemos una pizarra sencilla con esta nueva etiqueta y algo de JavaScript.

La sintaxis para crear un objeto canvas, es la siguiente:

  1.  
  2.         <canvas id="pizarra" width="300px" height="200px"></canvas>

  3.  

Como vemos, especificamos un ancho, un alto, y un id ("pizarra") que utilizaremos para manipular el canvas desde JavaScript. El código JavaScript comentado sería este: