javascript - キャンバスに焦点を合わせ続けるにはどうすればよいですか

Question

htmlとjavascriptで画像描画アプリを作っています。キャンバスで作成し、キャンバスにいくつかのボタンを追加<div>しました。もちろん、canvas には線を描画する onmousedown、onmouseup、onmousemove ハンドラがあります。しかし、マウスをボタンの位置またはキャンバスの外に移動してからキャンバス領域に戻ると、改行が発生します。コード ( http://jsfiddle.net/coldmund/MQKMv/ ) を参照してください。

html:

<div>
    <div style="position: absolute; margin-top: 0px; margin-left: 0px;"><canvas id="canvas" width="500" height="300" onmousedown="down(event)" onmouseup="up()" onmousemove="move(event)" style="border: 1px solid"></canvas></div>
    <div style="position: absolute; margin-top: 100px; margin-left: 100px; width: 100px; height: 100px; background: #ff0000; opacity: 0.5"></div>
</div>

js:

var mouseDown = false;
down = function(e)
{
    mouseDown = true;
    prevX = e.clientX;
    prevY = e.clientY;
};

up = function()
{
    mouseDown = false;
};

move = function(e)
{
    if( mouseDown === false )
        return;

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.lineWidth = 5;
    context.lineCap = 'round';

    context.beginPath();
    context.moveTo( prevX, prevY );
    context.lineTo( e.clientX, e.clientY );
    context.stroke();

    prevX = e.clientX;
    prevY = e.clientY;
};