var Draw = function(canvas) {

	this.canvas = canvas;

	this.width = canvas.width;

	this.height = canvas.height;

	this.context = canvas.getContext('2d');

	this.mousedownPoint = null;

	this.beforMousemovePoint = null;

	this.drawFlag = false;

	this.isDraw = false; //记录该canvas是否有写

	this.timeoutObject = null; //记录cavas的setTimeOut

	var $this = this;

	this.context.lineWidth = 3;



	$(canvas).on('mousedown', function(event) {

		$this.mousedownPoint = $this.toCanvasCoord(event.clientX, event.clientY);

		$this.drawFlag = true;

	});



	$(canvas).on('mousemove', function(event) {

		if ($this.drawFlag) {

			if (!$this.beforMousemovePoint) {

				$this.beforMousemovePoint = $this.toCanvasCoord(event.clientX, event.clientY);

				$this.context.beginPath();

				$this.context.moveTo($this.mousedownPoint.x, $this.mousedownPoint.y);

				$this.context.lineTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);

				$this.context.stroke();

				

			} else {

				$this.context.beginPath();

				$this.context.moveTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);

				var point = $this.toCanvasCoord(event.clientX, event.clientY);

				$this.context.lineTo(point.x, point.y);

				$this.context.stroke();

				$this.beforMousemovePoint = point;

			}

			$this.isDraw = true;

			

		}

	});



	$(canvas).on('mouseup', function(event) {

		$this.drawFlag = false;

		$this.mousedownPoint = null;

		$this.beforMousemovePoint = null;

	});



	$(canvas).on('mouseleave', function(event) {

		if ($this.drawFlag) {

			$this.drawFlag = false;

			$this.mousedownPoint = null;

			$this.beforMousemovePoint = null;

		}

	});

	//新增加事件

	$(canvas).bind('touchstart', function(event) {

		event.preventDefault();

		var touch = event.originalEvent.targetTouches[0];

		

        mouseX =touch.clientX;

        mouseY =touch.clientY;

		$this.mousedownPoint = $this.toCanvasCoord(mouseX, mouseY);

		$this.drawFlag = true;

	});

	$(canvas).bind('touchmove', function(event) {

			event.preventDefault();

			var touch = event.originalEvent.targetTouches[0];

		

			mouseX =touch.clientX;

			mouseY =touch.clientY;

			console.log(mouseX+'top:'+mouseY);

			if ($this.drawFlag) {

				if (!$this.beforMousemovePoint) {

					$this.beforMousemovePoint = $this.toCanvasCoord(mouseX, mouseY);

					$this.context.beginPath();

					$this.context.moveTo($this.mousedownPoint.x, $this.mousedownPoint.y);

					$this.context.lineTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);

					$this.context.stroke();

				} else {

					$this.context.beginPath();

					$this.context.moveTo($this.beforMousemovePoint.x, $this.beforMousemovePoint.y);

					var point = $this.toCanvasCoord(mouseX, mouseY);

					$this.context.lineTo(point.x, point.y);

					$this.context.stroke();

					$this.beforMousemovePoint = point;

				}

				$this.isDraw = true;

			}	

			

		});

	

		$(canvas).bind('touchend', function(event) {

			event.preventDefault();

			$this.drawFlag = false;

			$this.mousedownPoint = null;

			$this.beforMousemovePoint = null;

			if ($this.drawFlag) {

				$this.drawFlag = false;

				$this.mousedownPoint = null;

				$this.beforMousemovePoint = null;

			}

		});

	

	

}



Draw.prototype = {

	toCanvasCoord: function(x, y) {

		var point = {};

		var coord = this.canvas.getBoundingClientRect();

		point.x = x - coord.left;

		point.y = y - coord.top;

		return point;

	},

	erase: function() {

		this.context.clearRect(0, 0, this.width, this.height);

	}

};