canvas实现画板

//canvas转换成图片下载
document.getElementById("download").onclick=function(){
		canvas = document.getElementById("myCanvas");
		var dataURL = canvas.toDataURL("image/png");
		var a = document.getElementById("download");
		a.setAttribute("href",dataURL);
	}
function drawHuaban(){
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "black";
		var maxWidth = document.body.clientWidth;
		var maxHeight = document.body.clientHeight;
		ctx.fillRect(0,0,800,500);
		var onoff = false;
		var oldx = -10;
		var oldy = -10;
		ctx.lineWidth = 20;
		ctx.strokeStyle = "white";
		canvas.addEventListener("mousemove",drawA,true);
		canvas.addEventListener("mousedown",down,false);
		canvas.addEventListener("mouseup",up,false);
		canvas.addEventListener("mouseleave",leave,false);
		
		function down(e){
			onoff = true;
			oldx = e.pageX-10;
			oldy = e.pageY-10;
		}
		function leave(){
			onoff = false;
		}
		function up(){
			onoff = false;
		}
		function drawA(event){
			if(onoff == true){
				var x = event.pageX;
				var y = event.pageY;
				console.log("x:"+x+";y:"+y);
				ctx.lineCap = "round";
				ctx.beginPath();
				ctx.moveTo(oldx,oldy);
				ctx.lineTo(x,y);
				ctx.stroke();
				oldx = x;
				oldy = y;
			}
		}
	}