На днях решил освоить рисование на канвасе и споткнулся об интерактивность. Решил отслеживать события движения мыши над канвасом и менять картинку по событию.
Собственно код:
<!DOCTYPE HTML>
<html>
<head>
<script>
var ctx;
var canvas;
function handler(event){
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(event.pageX - this.offsetLeft, event.pageY - this.offsetLeft);
ctx.closePath();
ctx.strokeStyle = 'red';
ctx.stroke();
}
function main(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.onmouseover = handler;
canvas.onmousemove = handler;
};
</script>
</head>
<body onload="main()">
<canvas id="canvas" style="display: block; position: absolute; width: 200px; height: 200px; border: solid black 1px; top: 10px; left: 10px;">upgrade your browser!</canvas>
</body>
</html>
По моему разумению, в результате должна была получиться красная линия, которая тянется от верхнего левого угла канваса до курсора. Но почему-то конец линии не совпадет с курсором. ЧЯДНТ? ткните носом
