根据ajax给的json坐标等数据，动态赋值给canvas绘制相应线条笔记、背景图片、平滑曲线

//获取批改详情
$(document).on('click','.homework-hwremark',function(event){
	event.stopPropagation();//防止冒泡
	var indexs = layer.load(2,{shade: [0.5,'#fff']});
	var resultid = $(this).data('resultid');
	var data = {resultid:resultid}


	api.request('/service/homework/auditData',data).then(function (result) {
		layer.close(indexs);
		var drawdata = JSON.parse(result.data);
		console.log(drawdata);
		var pages = drawdata.pages[0];
		var background = pages.background.color;
		var vvtags = pages.vvtags;
		var elements = pages.elements;
		var newBackground = background.substr(background.length - 6);//当前背景色
		var rectLeft = elements[0]['rect'][0];//背景图片插入的位置
		var rectTop = elements[0]['rect'][1];//背景图片插入的位置
		
		
		packageTemplate('[data-role="homeworkCanvasDetail"]',vvtags,'#homeworkCanvasDetail');//画布批改详情
		//画布绘制
		var canvas = document.getElementById('cvs');
		canvas.width = drawdata.boardwidth;//画布大小
		canvas.height = drawdata.boardheight;
		var ctx = canvas.getContext("2d");
		
		
		//绘制图片-300001
		var imgs = new Image();
		imgs.src = elements[0]['file'];//'/static/shared/images/v3-banner05.jpg'
		imgs.onload = function(){
			//第一步
			ctx.drawImage(imgs,rectLeft,rectTop,elements[0]['width']*2,elements[0]['height']*2);


			//第二步-绘制手写线条
			for(var i=0;i<elements.length;i++){
				var points = elements[i]['points'];//手绘坐标点
				if(points){
					ctx.beginPath();
					ctx.lineWidth = 4;
					ctx.strokeStyle = '#FF0000';
					ctx.lineJoin = 'round';//让曲线变圆滑
					ctx.lineCap = 'round';//让曲线变圆滑
					ctx.moveTo(points[0][0],points[0][1]);
					$.each(points,function(idx,value){
						ctx.lineTo(value[0],value[1]);
					})
					ctx.stroke();//绘制
				}
			}


		};//图片加载完成再执行
		var auditData = layer.open({
			type: 1,
			title: ['', 'background:none;border-bottom:none'],
			area: ['auto', '80%'], //宽高
			content: $('.canvasbox')
		})
	}).catch(function (result) {
		layer.close(indexs);
		switch (result.errorCode) {
			case api.errorCode.rejected://接口返回失败
				errorMsg(result.msg);
				break;
			case api.errorCode.networkAnomaly://网络异常
				errorMsg('网络异常,请重试');
		        break;
			case api.errorCode.notLoggedIn://登录过期
				errorMsg(result.msg);
				doShowLoginPanel(window.location.pathname);
				break;
		}
	});
})

<!-- 画布批改详情 -->
<script id="homeworkCanvasDetail" type="text/html">
	{{# layui.each(d, function(idx, items){ }}
	<div style="position: absolute;left:{{items.left}};top:{{items.top}}">
		{{#  if(items.type == '702001'){ }}
		<div class="v1-homework-audio v1-homework-audio-auditStatus v1-homework-audio-auditStatusaudio" data-role="audioPreview" data-uri="{{items.target}}">
			<div class="hwaudio-animate"></div>
			<div class="divv">{{items.text}}</div>
		</div>
		{{# }else if(items.type == '702002'){ }}
		<div class="v1-homework-audio v1-homework-audio-auditStatus" data-role="videoPreview" data-uri="{{items.target}}">
			<div class="layui-icon layui-icons">&#xe623;</div>
			<div class="divv">{{items.text}}</div>
		</div>
		{{# } }}
	</div>
	{{# }); }}
</script>	

最后修订版（包含了擦除部分）
在原来的基础上分开创建了画布，第一个画布显示笔记之类的，第二个画布显示图片，css的position定位设置画布位置，这样笔记就不会遮盖图片了。

//获取批改详情
$(document).on('click','.homework-hwremark',function(event){
	event.stopPropagation();//防止冒泡
	var indexs = layer.load(2,{shade: [0.5,'#fff']});
	var resultid = $(this).data('resultid');
	var data = {resultid:resultid}
	api.request('/service/homework/auditData',data).then(function (result) {
		layer.close(indexs);
		var drawdata = JSON.parse(result.data);
		console.log(drawdata);
		var pages = drawdata.pages[0];
		var background = pages.background.color;
		var vvtags = pages.vvtags;
		var elements = pages.elements;
		var newBackground = background.substr(background.length - 6);//当前背景色
		var rectLeft = elements[0]['rect'][0];//背景图片插入的位置
		var rectTop = elements[0]['rect'][1];//背景图片插入的位置
		var rectwidth = elements[0]['rect'][2];//背景图片插入的位置
		var rectheight = elements[0]['rect'][3];//背景图片插入的位置
		
		packageTemplate('[data-role="homeworkCanvasDetail"]',vvtags,'#homeworkCanvasDetail');//画布批改详情
		//画布绘制
		var canvas = document.getElementById('cvs');//图片
		var canvas1 = document.getElementById('cvs1');//笔迹
		canvas.width = drawdata.boardwidth;//图片画布大小
		canvas.height = drawdata.boardheight;
		canvas1.width = drawdata.boardwidth;//笔迹画布大小
		canvas1.height = drawdata.boardheight;
		var ctx = canvas.getContext("2d");//图片
		var ctx1 = canvas1.getContext("2d");//笔迹
	
		//绘制图片-300001
		var imgs = new Image();
		// imgs.src = '/static/shared/images/v3-banner05.jpg';			
		imgs.src = elements[0]['file'];
		imgs.onload = function(){
			ctx.drawImage(imgs,rectLeft,rectTop,rectwidth - rectLeft,rectheight - rectTop);
			
			for(var i=0;i<elements.length;i++){
				var points = elements[i]['points'];//手绘坐标点
				if(points){
					ctx1.beginPath();
					ctx1.moveTo(points[0][0],points[0][1]);
					ctx1.lineJoin = 'round';//让曲线变圆滑
					ctx1.lineCap = 'round';
					if(elements[i]['type'] == '9'){
						ctx1.strokeStyle  = '#abcdef';
						ctx1.lineWidth = elements[i]['width'];
						ctx1.globalCompositeOperation="destination-out";  //异或结合处理
					}else{
						ctx1.strokeStyle  = "#FF0000";
						ctx1.lineWidth = elements[i]['width'];
						ctx1.globalCompositeOperation="source-over";  //异或结合处理
					}
					$.each(points,function(idx,value){
						ctx1.lineTo(value[0],value[1]);
					})			
					ctx1.stroke();//绘制
				}
			}
		};//图片加载完成再执行
		
		var auditData = layer.open({
			type: 1,
			title: ['', 'background:none;border-bottom:none'],
			area: ['auto', '80%'], //宽高
			content: $('.canvasbox')
		})
	}).catch(function (result) {
		layer.close(indexs);
	});
})