Вот чистая выжимка из твоего компота, то есть все что у тебя там было, все четко осталось включая логику рисования, но без свистелок вроде this this this. Или ты хотел одновременно на 10-ти канвасах рисовать?
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head><meta charset="utf-8">
<style>
#cnvwrp {
position:relative;
width:100%;
height:auto;
outline:1px solid #aaa;
}
#cnvwrp canvas {
cursor:crosshair;
}
</style>
</head><body>
<div tabindex="1" id="cnvwrp"></div>
<script>
function Sketch(opts) {
var pd=false,
x=function(e){return e.clientX-cnv.offsetLeft;},
y=function(e){return e.clientY-cnv.offsetTop;},
penDown = function(e) {
pd = true;
ctx.beginPath();
ctx.moveTo(x(e),y(e));
},
draw = function(e) {
if(!pd) return;
ctx.lineTo(x(e),y(e));
ctx.stroke();
},
penUp = function() {
pd = false;
},
div = document.getElementById(opts.id),
cnv = div.appendChild(document.createElement('canvas'));
cnv.heigth=opts.height;
cnv.width=div.offsetWidth;
ctx=cnv.getContext("2d");
for(var a in opts.init) ctx[a]=opts.init[a];
cnv.addEventListener('mousedown', penDown);
cnv.addEventListener('mouseup', penUp);
cnv.addEventListener('mouseout', penUp);
cnv.addEventListener('mousemove', draw);
};
Sketch({
id:'cnvwrp',
height:400,
init:{
lineWidth:5,
strokeStyle:'#a00',
lineJoin:'round',
lineCap:'round'
}
});
</script>
</body>
</html>