jquery - jQueryのoffset()の動作がおかしい

Question

半透明の画面を div の上に置きたいので、div の内容が気を散らすことなく、画面の上に画像を表示できます。メインの div は移動できるので、現在の幅、高さ、オフセットを jQuery で読み取り、それらを画面に適用します。でも毎回違う場所に画面が出てくる！コアコードは

$('#on').click(function () {
    canvasOffset = $('#canvas').offset();
    canvasWidth = $('#canvas').width();
    canvasHeight = $('#canvas').height();
    $('#canvasScreen').width(canvasWidth).height(canvasHeight).offset(canvasOffset).css({'opacity':'0.7', 'display' : 'block'});
    console.log("canvasHeight", canvasHeight, "canvasWidth", canvasWidth, "canvasOffset", canvasOffset);
});

ここに jsfiddle があります: http://jsfiddle.net/bdWW3/1/

Screen Onをクリックすると、画面が適用されます。Screen Offをクリックすると、画面が削除されます。Screen Onをもう一度クリックすると、画面が適用されますが、キャンバス div の上ではなく、別の場所に表示されます。しかし、console.log は、jQuery の offset() 呼び出しに入れられているのとまったく同じパラメーターを示しています!?

誰かが何が起こっているのか見ていますか?

ありがとう