Una de las novedades de HTML5 es el objeto canvas. Hoy vamos a aprovecharlo para dibujar un poquito con él gracias a Jquery, que nos permite ejecutar funciones según el ratón se mueve, gracias al evento mousemove.

Si queréis un poco de información básica sobre canvas os recomiendo esta entrada de Vagabundia.


var canvas,
ctx,
color="rgba(0,0,0,.2)",
miPrimerPincelPropiamentePropio={
    xAnt:0,//Posiciones anteriores
    yAnt:0,

   init:function(){
      //Aquí irían las configuraciones no variables 
      canvas.width=400;
      canvas.height=300;
      //grosor de la línea 
      ctx.lineWidth=1;
      ctx.strokeStyle=color;
      ctx.fillStyle=color;
   },

   dibujo:function (x,y) {
      //Configuramos xAnt e yAnt
      if(this.xAnt==0||this.yAnt==0){
        this.xAnt=x;
        this.yAnt=y;
      }
      //color de la línea y del relleno
      //(aunque ahora no hay relleno)
      ctx.beginPath();
      //nos movemos a la posición actual
      ctx.moveTo(x,y);
      //Hacemos una línea a la posición anterior
      ctx.lineTo(this.xAnt,this.yAnt);
      //pintamos la línea
      ctx.stroke();
      //guardamos los
      this.xAnt=x;
      this.yAnt=y;
   }
 }
//cambio de color de prueba
$('#rojo').bind('click',function(e){
    ctx.strokeStyle='rgba(255,0,0,.4)';
    ctx.lineWidth=4
});

$(function(){//Cogemos canvas y contexto
   canvas = document.getElementById('democanvas');
   ctx = canvas.getContext('2d');
   //iniciamos el pincel
   miPrimerPincelPropiamentePropio.init();

 $(canvas).bind('mousemove',function(evento){
    var canvasOffset=$(canvas).offset(),
    //hallamos la posición: page x-y es con respecto al ratón,
    //offset con respecto al borde del canvas
    posX=Math.floor(evento.pageX-canvasOffset.left),
    posY=Math.floor(evento.pageY-canvasOffset.top);
    //llamamos a la función de dibujo.
    miPrimerPincelPropiamentePropio.dibujo(posX,posY)
  });
});

El resultado sería algo así:

Utilizas un navegador no soportado

Y ahora otro de regalo, con formas aleatorias (aunque reconozco que no es demasiado bonito). En verde y rojo gana (se debería de ver más claro):

Utilizas un navegador no soportado

Para terminar, me gustaría deciros que he probado a hacer un fondo de blog a lo Paul Irish, con un pincel de Script-tutorials, pero que no ha salido igual :)