SOURCE

var sizeE;//橡皮擦大小
var fontSize;//笔画 字体大小
var allColor; //颜色
var mousePress = false;//画笔开关
var last = null;
var capi = false;//擦皮开关
var inText = false;//文本框开关
var ziX,ziY;//文字具体位置
 
var canvas = document.querySelector("#myCanvas");
var cxt = canvas.getContext("2d");
//var canvas2 = document.getElementById('myCanvas2');
var canvas3 = document.getElementById('myCanvas3');
/*zhuo599 第一步点击图片生成两个canvas层  start*/
var imgsrc = document.getElementById("imgsrc");
function imgTest(){
	var ele = this;
	document.getElementById("canvasdiv").style.display = "block";
	//canvas2.style.display = "block";
	console.log(ele.clientWidth,ele.clientHeight);
	canvas3.style.display = "block";
	canvas3.width = ele.clientWidth;
	canvas3.height = ele.clientHeight;
	
    canvas.width= ele.clientWidth;
    canvas.height= ele.clientHeight;
    cxt.drawImage(ele, 0, 0, ele.clientWidth, ele.clientHeight);
}
imgsrc.onclick = imgTest;
imgsrc.addEventListener("touchstart",imgTest,false);
/* 第一步点击图片生成两个canvas层  end*/
 
/*zhuo599 第二步更改橡皮大小  start*/
var eraseImg = document.getElementById("eraseImg");
var size = document.getElementsByName("eraseSize");
function caPi(){
	for (var i = 0; i < size.length; i++) {//获取到橡皮单选按钮组的选中值 
		if (size[i].checked == true) {
			sizeE = size[i].value; //将该值传到全局变量上，sizeE需要用来控制橡皮样式的位置 
			eraseImg.style.width = size[i].value +"px";//橡皮样式大小发生改变 
			eraseImg.style.height = size[i].value +"px";
		}
	}
}
 
/* 第二步更改橡皮大小  end*/
 
/*zhuo599 第三步更改大小  start*/
var fontS = document.getElementById("fontSize");
function fnFontsize(){
	fontSize = document.getElementById("fontSize").value;
}
fontS.onchange = fnFontsize;
fontS.addEventListener("touchstart",fnFontsize,false);
/* 第三步更改大小  end*/
 
/*zhuo599 第四步更改颜色  start*/
var color = document.getElementById("color");
function fnColor(){
	allColor = document.getElementById("color").value;
}
color.onchange = fnColor;
color.addEventListener("touchstart",fnColor,false);
/* 第四步更改颜色  end*/
 
/*zhuo599 第五步 擦皮画笔变换  start*/
var erase = document.getElementById("erase");
var eraseSeries = document.getElementById("eraseSeries");
function penRubber(e){
	if(erase.innerText == "擦皮"){
		eraseSeries.style.display = "inline-block";
		erase.innerText = "画笔";
		capi = true;
	}else{
		eraseSeries.style.display = "none";
		erase.innerText = "擦皮";
		capi = false;
	}
	e.preventDefault();
}
erase.onclick = penRubber;
erase.addEventListener("touchstart",penRubber,false);
/* 第五步 擦皮画笔变换  end*/
 
fnFontsize();//页面刚进入初始化字体大小
fnColor();//页面刚进入初始化颜色
caPi();//初始化擦皮大小
 
 
/*zhuo599 第六步 定位文字输入框的位置，并将文字画到canvas上  start*/
var board = canvas3.getContext('2d');
var textInput = document.getElementById("textareaInput");
function beginDraw() {
	mousePress = true;
	
	caPi();//拿到擦皮的大小
	
	if(inText){//如果文本框的开关是打开的，那么在点击canvas3的时候会出现一个文本框用来输入文字
		mousePress = false;//文本框开启的时候关闭画笔功能
		var event = window.event||event;
		if(isTouch(event)) {
			x = event.touches[0].pageX;
			y = event.touches[0].pageY;
			//console.log("手机"+x+",,,"+y);
		} else {
			x = event.offsetX + event.target.offsetLeft;
			y = event.offsetY + event.target.offsetTop;
		}
		textInput.style.display = "inline-block";
		textInput.style.left = x+"px";
		textInput.style.top = y+"px";
		ziX = x;
		ziY = y;//保存位置，为文字显示提供具体位置
		console.log(ziX,ziY);
		inText = false;//用完关闭文本框开关
		
		var type = event.type;
		if(type.indexOf('touch') >= 0) {//说明是手机事件，需要阻止冒泡
			event.preventDefault();
		}
	}else{
		writeZi();
	}
}
function writeZi(){
	console.log("画出文字了",ziX,ziY);
	if(ziX != undefined && ziY != undefined){
		board.font = fontSize+"px 宋体";
		board.fillStyle = allColor;
		board.fillText(textInput.value,ziX+2,ziY-36);
		textInput.style.display = "none";
		textInput.style.top = "50px";
		textInput.style.left = "0px";
		textInput.value = "";
	}
}
textInput.onblur = writeZi;
/* 第六步 定位文字输入框的位置，并将文字画到canvas上  end*/
 
/*zhuo599 第七步 画笔橡皮擦切换  start*/
function drawing() {
	board.lineWidth = fontSize;//全局画笔宽度
	if(!capi){//画笔
		console.log(fontSize,allColor);
		board.strokeStyle = allColor;
		//console.log(fontSize,allColor);
		var event = window.event||event;
		event.preventDefault();
		if(!mousePress) return;
		var xy = pos(event);
		if(last != null) {
			board.beginPath();
			board.lineCap="round";
			board.moveTo(last.x, last.y);
			board.lineTo(xy.x, xy.y);
			board.stroke();
		}
		last = xy;
	}else{//橡皮
		var event = window.event||event;
		event.preventDefault();
		if(!mousePress) return;
		var xy = pos(event);
		if(last != null) {
			board.clearRect(xy.x, xy.y, sizeE, sizeE);
		}
		last = xy;
	}
	
}
/* 第七步 画笔橡皮擦切换  end*/
 
/*zhuo599 阻止事件冒泡和确定需要画写的位置  start*/
function endDraw() {
	var event = window.event||event;
	mousePress = false;
	event.preventDefault();
	last = null;
}
function pos(event) {
	var x, y;
	if(isTouch(event)) {
		x = event.touches[0].pageX;
		y = event.touches[0].pageY-50;
		//console.log("手机"+x+",,,"+y);
	} else {
		x = event.offsetX + event.target.offsetLeft;
		y = event.offsetY + event.target.offsetTop-50;
	}
	// log('x='+x+' y='+y);
	return {
		x: x,
		y: y
	};
}
function isTouch(event) {
	var type = event.type;
	//console.log(type);
	if(type.indexOf('touch') >= 0) {
		return true;
	} else {
		return false;
	}
}
canvas3.onmousedown = beginDraw;
canvas3.onmousemove = drawing;
canvas3.onmouseup = endDraw;
canvas3.addEventListener('touchstart', beginDraw, false);
canvas3.addEventListener('touchmove', drawing, false);
canvas3.addEventListener('touchend', endDraw, false);
/* 阻止事件冒泡和确定需要画写的位置  end*/
 
/*zhuo599 第八步在topCanvas层上点击出文本框  start*/
var inputText = document.getElementById("etext");
function displayInput(){
	inText = true;
}
inputText.onclick = displayInput;
inputText.addEventListener('touchstart', displayInput, false);
/* 第八步在topCanvas层上点击出文本框  end*/
 
 
/**
 * vizhuowd
 * 保存图片方法
 */
function saveImg(){
	cxt.drawImage(canvas3, 0, 0, 639, 640);
	//base64
	var dataUrl = canvas.toDataURL();
	document.getElementById("tupian").src = dataUrl;
}
 
/**
 * vizhuowd
 * 取消方法
 */
function cancelImg(){
	board.clearRect(0, 0, canvas3.width, canvas3.height);
	document.getElementById("canvasdiv").style.display = "none";
	canvas3.style.display = "none";
}

<!--zhuo599 下面这个img是老师发过来的图片，也就是准备在上面画的底图-->
<img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" class="img" id="imgsrc" />
		
		<div class="canvasdiv" id="canvasdiv">
			<div class="navbar" id="btnTeam">
                <!--zhuo599 画笔颜色设置-->
				<select id="color">
					<option class="opt" value="red">红色</option>
					<option class="opt" value="yellow">黄色</option>
					<option class="opt" value="blue">蓝色</option>
					<option class="opt" value="black" selected>黑色</option>
					<option class="opt" value="green">绿色</option>
				</select>
				<select id="fontSize">
					<!--zhuo599 画笔大小-->
					<option value="5" selected>5</option>
					<option value="10">10</option>
					<option value="15">15</option>
					<option value="20">20</option>
					<option value="30">30</option>
				</select>
				<button id="erase" class="erase">擦皮</button>
				<!--zhuo599 橡皮按钮-->
				<div class="eraseSeries" id="eraseSeries">
					<!--zhuo599 橡皮大小-->
					<input type="radio" name="eraseSize" value="5" checked="checked" />5
					<input type="radio" name="eraseSize" value="10" />10
					<input type="radio" name="eraseSize" value="15" /> 15
					<input type="radio" name="eraseSize" value="20" /> 20
					<input type="radio" name="eraseSize" value="30" />30
				</div>
				<button id="etext" class="etext">文字</button>
				<button id="saveimg" class="saveimg" onclick="saveImg()">保存</button>
				<button id="cancel" class="cancelimg" onclick="cancelImg()">取消</button>
			</div>
			<canvas id="myCanvas" class="bottomCanvas"></canvas>
			<canvas id="myCanvas3" class="topCanvas"></canvas>
			<div id="eraseImg">
				<!--zhuo599 橡皮形状-->
			</div>
			<textarea id="textareaInput" class="drag"></textarea>
		</div>
		<img src="" id="tupian"  />

*{margin: 0;padding: 0;}
HTML,body{width: 100%;height: 100%;overflow: hidden;}
.canvasdiv{width: 100%;height: 100%;position: absolute;display: none;
	z-index: 5;top: 0;left: 0;background: #DADADA;overflow: hidden;-webkit-touch-callout: 
    none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;
	-ms-user-select: none;user-select: none;}
.navbar{width: 500px;height: 40px;margin: 5px 0;position: relative;}
.navbar a{display: inline-block;height: 40px;width: 40px;border-radius: 20px;
	position: absolute;right: -20px;background: #B4A484;text-align: center;line-height: 
    40px;font-size: 30px;top: 0;-webkit-touch-callout: none;-webkit-user-select: none;
	-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select:         
    none;}
.eraseSeries{display: inline-block;height: 20px;margin: 10px 0 10px 15px;vertical-align:                 
    middle;display: none;}
.eraseSeries input{width: 20px;height: 20px;vertical-align: middle;}
select,.erase,.etext,.saveimg,.cancelimg{height: 30px;margin: 5px 0px 5px 15px;vertical-align: middle;}
.erase,.etext,.saveimg,.cancelimg{padding: 0 10px;}
textarea{width: 200px;height: 30px;background: transparent;position: absolute;display:none;top: 50px;left: 0;/*outline:none;*/border: 2px solid #c1c1c1;resize:both;}
#eraseImg {border: solid;color: gray;border-radius: 118px;width: 5px;height: 5px;position: absolute;display: none;}
.bottomCanvas{position: relative;left: 0;top: 0;z-index: 1;}
.centerCanvas{background: transparent;position: absolute;left: 0;top: 50px;z-index: 2;display: none;}
.topCanvas{background: transparent;position: absolute;left: 0;top: 50px;z-index: 3;display: none;}
.drag{z-index: 4;}