devniel · January 13, 2012 21:41
diff --git a/whiteboard.html b/whiteboard.html
 <!DOCTYPE html>
 <html>
 <head>
 <script>
 window.onload = function(){
 var canvas = document.querySelector("canvas");
 var ctx = canvas.getContext("2d");
 var x,y,n;
 var rec = new Array();
  
 canvas.onmousedown = function(e) {
    x = e.x;
    y = e.y;
    ctx.moveTo(x, y);       
 }
    
 canvas.onmouseup = function(e) {
    x = "space";
    y = "space";
    n = rec.length;        
    rec[n] = new Array(x,y);
    x = null;
    y = null;
 }

 canvas.onmousemove = function(e) {
    if (x == null || y == null) return false;
    x = e.x;
    y = e.y;
    n = rec.length;        
    rec[n] = new Array(x,y);    
    ctx.lineTo(x, y);
    ctx.moveTo(x, y);
    ctx.stroke();
 }

 function redraw(rec){
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var i=0;
    canvas.width = canvas.width;
    var animation = setInterval(function(){
        var m = rec[i][0];
        var n = rec[i][1];
        ctx.lineTo(m,n);
        ctx.stroke();
        if((rec[i+1][0] == "space") && ((i+2)<(rec.length-1))){
            ctx.moveTo(rec[i+2][0],rec[i+2][1]);
            i+=2;
        }else
            i++;
        if(i==(rec.length-1))clearTimeout(animation);
    },50);
 }

 document.querySelector("#redraw").onclick = function(){
    redraw(rec);
 }
 };
 </script>
 <style type="text/css">
 canvas {
    border: 1px solid #CCC;
 }
 </style>
 </head>
 <body>
 <canvas width="400px" height="400px">
 </canvas>
 <button id="redraw">Dibujar</button>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	window.onload = function(){
	var canvas = document.querySelector("canvas");
	var ctx = canvas.getContext("2d");
	var x,y,n;
	var rec = new Array();

	canvas.onmousedown = function(e) {
	x = e.x;
	y = e.y;
	ctx.moveTo(x, y);
	}

	canvas.onmouseup = function(e) {
	x = "space";
	y = "space";
	n = rec.length;
	rec[n] = new Array(x,y);
	x = null;
	y = null;
	}

	canvas.onmousemove = function(e) {
	if (x == null \|\| y == null) return false;
	x = e.x;
	y = e.y;
	n = rec.length;
	rec[n] = new Array(x,y);
	ctx.lineTo(x, y);
	ctx.moveTo(x, y);
	ctx.stroke();
	}

	function redraw(rec){
	var canvas = document.querySelector("canvas");
	var ctx = canvas.getContext("2d");
	var i=0;
	canvas.width = canvas.width;
	var animation = setInterval(function(){
	var m = rec[i][0];
	var n = rec[i][1];
	ctx.lineTo(m,n);
	ctx.stroke();
	if((rec[i+1][0] == "space") && ((i+2)<(rec.length-1))){
	ctx.moveTo(rec[i+2][0],rec[i+2][1]);
	i+=2;
	}else
	i++;
	if(i==(rec.length-1))clearTimeout(animation);
	},50);
	}

	document.querySelector("#redraw").onclick = function(){
	redraw(rec);
	}
	};
	</script>
	<style type="text/css">
	canvas {
	border: 1px solid #CCC;
	}
	</style>
	</head>
	<body>
	<canvas width="400px" height="400px">
	</canvas>
	<button id="redraw">Dibujar</button>
	</body>
	</html>