--- 08-paintr_orig.htm	2006-08-28 01:07:42.656250000 +0200
+++ 08-paintr2.htm	2006-08-28 01:08:14.375000000 +0200
@@ -1,10 +1,11 @@
 
  
   
   <style>
-   html { min-width:220px; max-width:20em; margin:0 auto; font:1.4em/1.7 Arial, sans-serif; background:#fff; color:#000 }
+   html { font:1.4em/1.7 Arial, sans-serif; background:#fff; color:#000 }
+   body { min-width:220px; max-width:20em; margin:0 auto; }
    h1 { margin:0; content:url(08-paintr-logo) }
    button { margin:0 0 .4em 0; font-size:inherit }
    canvas#paintr { margin:0 1em 1em 0; border:solid; float:left }
@@ -23,13 +24,28 @@
         ctx = canvas.getContext('2d'),
         state = 0;
 
+    // Return the absolute position of an element. Inspired by Yahoo UI
+    function getPos(e) {
+     var x = e.offsetLeft
+     var y = e.offsetTop;
+     var parentNode = e.offsetParent;
+     while (parentNode && parentNode != e) {
+      x += parentNode.offsetLeft;
+      y += parentNode.offsetTop;
+      parentNode = parentNode.offsetParent;
+     }
+     return {x: x, y: y}
+    }        
+
+    var canvasPos = getPos(canvas);
+        
     function start(event) {
      canvas.addEventListener("mousemove", update, false);
      if(state == 0){
       canvas.clearPaintr();
      }
      ctx.beginPath();
-     ctx.moveTo(event.offsetX, event.offsetY);
+     ctx.moveTo(event.clientX - canvasPos.x, event.clientY - canvasPos.y);
      state = 1;
     }
 
@@ -39,7 +55,7 @@
     }
 
     function update(event) {
-     ctx.lineTo(event.offsetX, event.offsetY);
+     ctx.lineTo(event.clientX - canvasPos.x, event.clientY - canvasPos.y);
      ctx.stroke();
     }