convasOffset
HTML
<canvas id="drawing"></canvas>
<canvas id="without_offset"></canvas>
CSS
#drawing {
border: 1px solid #000;
position: absolute;
top: 50px;
right: 0;
}
#without_offset {
border: 1px solid green;
}
JavaScript
function makeDrawFunction(elem) {
var context = elem.getContext('2d');
return function(e) {
var offset = $(elem).offset();
context.lineTo(e.clientX - offset.left + 100, e.clientY);
context.stroke();
}
}
var ctx = document.getElementById("drawing");
$("#drawing").mousemove(makeDrawFunction(ctx));
var ctx_without_offset = document.getElementById("without_offset");
$("#without_offset").mousemove(makeDrawFunction(ctx_without_offset));