var canvas,

ctx,
color="rgba(0,0,0,.2)",
miPrimerPincelPropiamentePropio={
xAnt:0,//Posiciones anteriores
yAnt:0,
init:function(){
//Aqu iran las configuraciones no variables
canvas.width=400;
canvas.height=300;
//grosor de la lnea
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 lnea y del relleno
//(aunque ahora no hay relleno)
ctx.beginPath();
//nos movemos a la posicin actual
ctx.moveTo(x,y);
//Hacemos una lnea a la posicin anterior
ctx.lineTo(this.xAnt,this.yAnt);
//pintamos la lnea
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 posicin: page x-y es con respecto al ratn,
//offset con respecto al borde del canvas
posX=Math.floor(evento.pageX-canvasOffset.left),
posY=Math.floor(evento.pageY-canvasOffset.top);
//llamamos a la funcin de dibujo.
miPrimerPincelPropiamentePropio.dibujo(posX,posY)
});
});