Update.

.eslintrc

@@ -42,7 +42,7 @@
     max-len: [0, 80, 4]
     max-nested-callbacks: [1, 3]
     max-params: [1, 5] ###
-    max-statements: [1, 32] ###
+    max-statements: [1, 48] ###
     new-cap: 0
     new-parens: 2
     newline-after-var: 0

.gitignore

@@ -1,3 +1,4 @@
+/.nyc_output/
 /build/
 /coverage/
 /local/

dist/pagemap.js

@@ -1,4 +1,4 @@
-/*! pagemap v1.1.0 - https://larsjung.de/pagemap/ */
+/*! pagemap v1.2.0 - https://larsjung.de/pagemap/ */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -99,102 +99,100 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(global) {var WIN = global.window;
-var DOC = WIN.document;
-var DOC_EL = DOC.documentElement;
-var body = DOC.querySelector('body');
+/* WEBPACK VAR INJECTION */(function(global) {module.exports = function (canvas, options) {
+  var WIN = global.window;
+  var DOC = WIN.document;
+  var DOC_EL = DOC.documentElement;
+  var BODY = DOC.querySelector('body');
+  var CTX = canvas.getContext('2d');
 
-var black = function black(pc) {
-  return "rgba(0,0,0,".concat(pc / 100, ")");
-};
-
-var defaults = {
-  viewport: null,
-  styles: {
-    'header,footer,section,article': black(8),
-    'h1,a': black(10),
-    'h2,h3,h4': black(8)
-  },
-  back: black(2),
-  view: black(5),
-  drag: black(10),
-  interval: null
-};
-
-var _listener = function _listener(el, method, types, fn) {
-  return types.split(/\s+/).forEach(function (type) {
-    return el[method](type, fn);
-  });
-};
-
-var on = function on(el, types, fn) {
-  return _listener(el, 'addEventListener', types, fn);
-};
-
-var off = function off(el, types, fn) {
-  return _listener(el, 'removeEventListener', types, fn);
-};
-
-var Rect = function Rect(x, y, w, h) {
-  return {
-    x: x,
-    y: y,
-    w: w,
-    h: h
+  var black = function black(pc) {
+    return "rgba(0,0,0,".concat(pc / 100, ")");
   };
-};
 
-var rect_rel_to = function rect_rel_to(rect) {
-  var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    x: 0,
-    y: 0
+  var settings = Object.assign({
+    viewport: null,
+    styles: {
+      'header,footer,section,article': black(8),
+      'h1,a': black(10),
+      'h2,h3,h4': black(8)
+    },
+    back: black(2),
+    view: black(5),
+    drag: black(10),
+    interval: null
+  }, options);
+
+  var _listener = function _listener(el, method, types, fn) {
+    return types.split(/\s+/).forEach(function (type) {
+      return el[method](type, fn);
+    });
   };
-  return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
-};
 
-var rect_of_doc = function rect_of_doc() {
-  return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
-};
-
-var rect_of_win = function rect_of_win() {
-  return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
-};
-
-var el_get_offset = function el_get_offset(el) {
-  var br = el.getBoundingClientRect();
-  return {
-    x: br.left + WIN.pageXOffset,
-    y: br.top + WIN.pageYOffset
+  var on = function on(el, types, fn) {
+    return _listener(el, 'addEventListener', types, fn);
   };
-};
 
-var rect_of_el = function rect_of_el(el) {
-  var _el_get_offset = el_get_offset(el),
-      x = _el_get_offset.x,
-      y = _el_get_offset.y;
+  var off = function off(el, types, fn) {
+    return _listener(el, 'removeEventListener', types, fn);
+  };
 
-  return Rect(x, y, el.offsetWidth, el.offsetHeight);
-};
+  var Rect = function Rect(x, y, w, h) {
+    return {
+      x: x,
+      y: y,
+      w: w,
+      h: h
+    };
+  };
 
-var rect_of_viewport = function rect_of_viewport(el) {
-  var _el_get_offset2 = el_get_offset(el),
-      x = _el_get_offset2.x,
-      y = _el_get_offset2.y;
+  var rect_rel_to = function rect_rel_to(rect) {
+    var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      x: 0,
+      y: 0
+    };
+    return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+  };
 
-  return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
-};
+  var rect_of_doc = function rect_of_doc() {
+    return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+  };
 
-var rect_of_content = function rect_of_content(el) {
-  var _el_get_offset3 = el_get_offset(el),
-      x = _el_get_offset3.x,
-      y = _el_get_offset3.y;
+  var rect_of_win = function rect_of_win() {
+    return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+  };
 
-  return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
-};
+  var el_get_offset = function el_get_offset(el) {
+    var br = el.getBoundingClientRect();
+    return {
+      x: br.left + WIN.pageXOffset,
+      y: br.top + WIN.pageYOffset
+    };
+  };
 
-module.exports = function (canvas, options) {
-  var settings = Object.assign({}, defaults, options);
-  var context = canvas.getContext('2d');
+  var rect_of_el = function rect_of_el(el) {
+    var _el_get_offset = el_get_offset(el),
+        x = _el_get_offset.x,
+        y = _el_get_offset.y;
+
+    return Rect(x, y, el.offsetWidth, el.offsetHeight);
+  };
+
+  var rect_of_viewport = function rect_of_viewport(el) {
+    var _el_get_offset2 = el_get_offset(el),
+        x = _el_get_offset2.x,
+        y = _el_get_offset2.y;
+
+    return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+  };
+
+  var rect_of_content = function rect_of_content(el) {
+    var _el_get_offset3 = el_get_offset(el),
+        x = _el_get_offset3.x,
+        y = _el_get_offset3.y;
+
+    return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+  };
 
   var calc_scale = function () {
     var width = canvas.clientWidth;
@@ -225,14 +223,12 @@ module.exports = function (canvas, options) {
   var drag_ry;
 
   var draw_rect = function draw_rect(rect, col) {
-    if (!col) {
-      return;
+    if (col) {
+      CTX.beginPath();
+      CTX.rect(rect.x, rect.y, rect.w, rect.h);
+      CTX.fillStyle = col;
+      CTX.fill();
     }
-
-    context.beginPath();
-    context.rect(rect.x, rect.y, rect.w, rect.h);
-    context.fillStyle = col;
-    context.fill();
   };
 
   var apply_styles = function apply_styles(styles) {
@@ -249,9 +245,9 @@ module.exports = function (canvas, options) {
     view_rect = viewport ? rect_of_viewport(viewport) : rect_of_win();
     scale = calc_scale(root_rect.w, root_rect.h);
     resize_canvas(root_rect.w * scale, root_rect.h * scale);
-    context.setTransform(1, 0, 0, 1, 0, 0);
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    context.scale(scale, scale);
+    CTX.setTransform(1, 0, 0, 1, 0, 0);
+    CTX.clearRect(0, 0, canvas.width, canvas.height);
+    CTX.scale(scale, scale);
     draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
     apply_styles(settings.styles);
     draw_rect(rect_rel_to(view_rect, root_rect), drag ? settings.drag : settings.view);
@@ -276,7 +272,7 @@ module.exports = function (canvas, options) {
   var on_drag_end = function on_drag_end(ev) {
     drag = false;
     canvas.style.cursor = 'pointer';
-    body.style.cursor = 'auto';
+    BODY.style.cursor = 'auto';
     off(WIN, 'mousemove', on_drag);
     off(WIN, 'mouseup', on_drag_end);
     on_drag(ev);
@@ -295,7 +291,7 @@ module.exports = function (canvas, options) {
     }
 
     canvas.style.cursor = 'crosshair';
-    body.style.cursor = 'crosshair';
+    BODY.style.cursor = 'crosshair';
     on(WIN, 'mousemove', on_drag);
     on(WIN, 'mouseup', on_drag_end);
     on_drag(ev);

dist/pagemap.min.js

@@ -1,2 +1,2 @@
-/*! pagemap v1.1.0 - https://larsjung.de/pagemap/ */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("pagemap",[],t):"object"==typeof exports?exports.pagemap=t():e.pagemap=t()}("undefined"!=typeof self?self:this,function(){return function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(n,e,t){(function(e){function t(e){return"rgba(0,0,0,".concat(e/100,")")}function r(t,n,e,r){return e.split(/\s+/).forEach(function(e){return t[n](e,r)})}function b(e,t,n){return r(e,"addEventListener",t,n)}function w(e,t,n){return r(e,"removeEventListener",t,n)}function j(e,t,n,r){return{x:e,y:t,w:n,h:r}}function O(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return j(e.x-t.x,e.y-t.y,e.w,e.h)}function S(e){var t=e.getBoundingClientRect();return{x:t.left+E.pageXOffset,y:t.top+E.pageYOffset}}function T(e){var t=S(e),n=t.x,r=t.y;return j(n+e.clientLeft,r+e.clientTop,e.clientWidth,e.clientHeight)}var E=e.window,H=E.document,L=H.documentElement,P=H.querySelector("body"),W={viewport:null,styles:{"header,footer,section,article":t(8),"h1,a":t(10),"h2,h3,h4":t(8)},back:t(2),view:t(5),drag:t(10),interval:null};n.exports=function(o,e){function r(e,t){t&&(g.beginPath(),g.rect(e.x,e.y,e.w,e.h),g.fillStyle=t,g.fill())}function t(n){Object.keys(n).forEach(function(e){var t=n[e];(function(e){return Array.from((m||H).querySelectorAll(e))})(e).forEach(function(e){r(O(function(e){var t=S(e),n=t.x,r=t.y;return j(n,r,e.offsetWidth,e.offsetHeight)}(e),a),t)})})}function i(){a=m?function(e){var t=S(e),n=t.x,r=t.y;return j(n+e.clientLeft-e.scrollLeft,r+e.clientTop-e.scrollTop,e.scrollWidth,e.scrollHeight)}(m):j(0,0,L.scrollWidth,L.scrollHeight),s=m?T(m):j(E.pageXOffset,E.pageYOffset,L.clientWidth,L.clientHeight),p=v(a.w,a.h),function(e,t){o.width=e,o.height=t,o.style.width="".concat(e,"px"),o.style.height="".concat(t,"px")}(a.w*p,a.h*p),g.setTransform(1,0,0,1,0,0),g.clearRect(0,0,o.width,o.height),g.scale(p,p),r(O(a,a),y.back),t(y.styles),r(O(s,a),x?y.drag:y.view)}function c(e){e.preventDefault();var t=T(o),n=(e.pageX-t.x)/p-s.w*d,r=(e.pageY-t.y)/p-s.h*h;m?(m.scrollLeft=n,m.scrollTop=r):E.scrollTo(n,r),i()}function u(e){x=!1,o.style.cursor="pointer",P.style.cursor="auto",w(E,"mousemove",c),w(E,"mouseup",u),c(e)}function n(e){x=!0;var t=T(o),n=O(s,a);d=((e.pageX-t.x)/p-n.x)/n.w,h=((e.pageY-t.y)/p-n.y)/n.h,(d<0||1<d||h<0||1<h)&&(h=d=.5),o.style.cursor="crosshair",P.style.cursor="crosshair",b(E,"mousemove",c),b(E,"mouseup",u),c(e)}var l,f,a,s,p,d,h,y=Object.assign({},W,e),g=o.getContext("2d"),v=(l=o.clientWidth,f=o.clientHeight,function(e,t){return Math.min(l/e,f/t)}),m=y.viewport,x=!1;return o.style.cursor="pointer",b(o,"mousedown",n),b(m||E,"load resize scroll",i),0<y.interval&&setInterval(function(){return i()},y.interval),i(),{redraw:i}}}).call(this,t(1))},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n}])});
+/*! pagemap v1.2.0 - https://larsjung.de/pagemap/ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("pagemap",[],t):"object"==typeof exports?exports.pagemap=t():e.pagemap=t()}("undefined"!=typeof self?self:this,function(){return function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,n){(function(M){e.exports=function(o,e){function t(e){return"rgba(0,0,0,".concat(e/100,")")}function r(t,n,e,r){return e.split(/\s+/).forEach(function(e){return t[n](e,r)})}function i(e,t,n){return r(e,"addEventListener",t,n)}function n(e,t,n){return r(e,"removeEventListener",t,n)}function c(e,t,n,r){return{x:e,y:t,w:n,h:r}}function u(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{x:0,y:0};return c(e.x-t.x,e.y-t.y,e.w,e.h)}function l(e){var t=e.getBoundingClientRect();return{x:t.left+O.pageXOffset,y:t.top+O.pageYOffset}}function f(e){var t=l(e),n=t.x,r=t.y;return c(n+e.clientLeft,r+e.clientTop,e.clientWidth,e.clientHeight)}function a(e,t){t&&(H.beginPath(),H.rect(e.x,e.y,e.w,e.h),H.fillStyle=t,H.fill())}function s(n){Object.keys(n).forEach(function(e){var t=n[e];(function(e){return Array.from((W||S).querySelectorAll(e))})(e).forEach(function(e){a(u(function(e){var t=l(e),n=t.x,r=t.y;return c(n,r,e.offsetWidth,e.offsetHeight)}(e),m),t)})})}function p(){m=W?function(e){var t=l(e),n=t.x,r=t.y;return c(n+e.clientLeft-e.scrollLeft,r+e.clientTop-e.scrollTop,e.scrollWidth,e.scrollHeight)}(W):c(0,0,T.scrollWidth,T.scrollHeight),x=W?f(W):c(O.pageXOffset,O.pageYOffset,T.clientWidth,T.clientHeight),b=P(m.w,m.h),function(e,t){o.width=e,o.height=t,o.style.width="".concat(e,"px"),o.style.height="".concat(t,"px")}(m.w*b,m.h*b),H.setTransform(1,0,0,1,0,0),H.clearRect(0,0,o.width,o.height),H.scale(b,b),a(u(m,m),L.back),s(L.styles),a(u(x,m),_?L.drag:L.view)}function d(e){e.preventDefault();var t=f(o),n=(e.pageX-t.x)/b-x.w*w,r=(e.pageY-t.y)/b-x.h*j;W?(W.scrollLeft=n,W.scrollTop=r):O.scrollTo(n,r),p()}function h(e){_=!1,o.style.cursor="pointer",E.style.cursor="auto",n(O,"mousemove",d),n(O,"mouseup",h),d(e)}function y(e){_=!0;var t=f(o),n=u(x,m);w=((e.pageX-t.x)/b-n.x)/n.w,j=((e.pageY-t.y)/b-n.y)/n.h,(w<0||1<w||j<0||1<j)&&(j=w=.5),o.style.cursor="crosshair",E.style.cursor="crosshair",i(O,"mousemove",d),i(O,"mouseup",h),d(e)}var g,v,m,x,b,w,j,O=M.window,S=O.document,T=S.documentElement,E=S.querySelector("body"),H=o.getContext("2d"),L=Object.assign({viewport:null,styles:{"header,footer,section,article":t(8),"h1,a":t(10),"h2,h3,h4":t(8)},back:t(2),view:t(5),drag:t(10),interval:null},e),P=(g=o.clientWidth,v=o.clientHeight,function(e,t){return Math.min(g/e,v/t)}),W=L.viewport,_=!1;return o.style.cursor="pointer",i(o,"mousedown",y),i(W||O,"load resize scroll",p),0<L.interval&&setInterval(function(){return p()},L.interval),p(),{redraw:p}}}).call(this,n(1))},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n}])});

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pagemap",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3432,9 +3432,9 @@
       }
     },
     "ghu": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/ghu/-/ghu-0.19.0.tgz",
-      "integrity": "sha512-r1eyzRpU/s9fVx8z1DNzplsjQIWDPSgqI6FXA0BRq2HBkrYePOeZboaLoForWgNUAfOvFWXAoFq/Bw2nW0gXTA==",
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/ghu/-/ghu-0.20.0.tgz",
+      "integrity": "sha512-FdKA8d5XmJRv3Df9O1+EyFrxM4iBqH0eXqzAq9ee3hpP+wbk2w1EcthWQKpgk2hEsNQot7H5Nac0nt0e7M6EZg==",
       "dev": true,
       "requires": {
         "@babel/core": "7.4.3",
@@ -5409,9 +5409,9 @@
       }
     },
     "regexp-tree": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.5.tgz",
-      "integrity": "sha512-nUmxvfJyAODw+0B13hj8CFVAxhe7fDEAgJgaotBu3nnR+IgGgZq59YedJP5VYTlkEfqjuK6TuRpnymKdatLZfQ==",
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.6.tgz",
+      "integrity": "sha512-LFrA98Dw/heXqDojz7qKFdygZmFoiVlvE1Zp7Cq2cvF+ZA+03Gmhy0k0PQlsC1jvHPiTUSs+pDHEuSWv6+6D7w==",
       "dev": true
     },
     "regexpp": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagemap",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Mini map for web pages.",
   "homepage": "https://larsjung.de/pagemap/",
   "bugs": "https://github.com/lrsjng/pagemap/issues",
@@ -22,7 +22,7 @@
     "@babel/core": "7.4.4",
     "@babel/preset-env": "7.4.4",
     "eslint": "5.16.0",
-    "ghu": "0.19.0",
+    "ghu": "0.20.0",
     "jsdom": "15.0.0",
     "scar": "1.7.0"
   },

src/pagemap.js

@@ -1,60 +1,61 @@
-const WIN = global.window;
-const DOC = WIN.document;
-const DOC_EL = DOC.documentElement;
-const body = DOC.querySelector('body');
-
-const black = pc => `rgba(0,0,0,${pc / 100})`;
-const defaults = {
-    viewport: null,
-    styles: {
-        'header,footer,section,article': black(8),
-        'h1,a': black(10),
-        'h2,h3,h4': black(8)
-    },
-    back: black(2),
-    view: black(5),
-    drag: black(10),
-    interval: null
-};
-
-const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
-const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
-const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
-
-const Rect = (x, y, w, h) => { return {x, y, w, h}; };
-const rect_rel_to = (rect, pos = {x: 0, y: 0}) => Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
-
-const rect_of_doc = () => {
-    return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
-};
-
-const rect_of_win = () => {
-    return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
-};
-
-const el_get_offset = el => {
-    const br = el.getBoundingClientRect();
-    return {x: br.left + WIN.pageXOffset, y: br.top + WIN.pageYOffset};
-};
-
-const rect_of_el = el => {
-    const {x, y} = el_get_offset(el);
-    return Rect(x, y, el.offsetWidth, el.offsetHeight);
-};
-
-const rect_of_viewport = el => {
-    const {x, y} = el_get_offset(el);
-    return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
-};
-
-const rect_of_content = el => {
-    const {x, y} = el_get_offset(el);
-    return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
-};
-
 module.exports = (canvas, options) => {
-    const settings = Object.assign({}, defaults, options);
-    const context = canvas.getContext('2d');
+    const WIN = global.window;
+    const DOC = WIN.document;
+    const DOC_EL = DOC.documentElement;
+    const BODY = DOC.querySelector('body');
+    const CTX = canvas.getContext('2d');
+
+    const black = pc => `rgba(0,0,0,${pc / 100})`;
+    const settings = Object.assign({
+        viewport: null,
+        styles: {
+            'header,footer,section,article': black(8),
+            'h1,a': black(10),
+            'h2,h3,h4': black(8)
+        },
+        back: black(2),
+        view: black(5),
+        drag: black(10),
+        interval: null
+    }, options);
+
+    const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
+    const on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
+    const off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
+
+    const Rect = (x, y, w, h) => { return {x, y, w, h}; };
+
+    const rect_rel_to = (rect, pos = {x: 0, y: 0}) => {
+        return Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+    };
+
+    const rect_of_doc = () => {
+        return Rect(0, 0, DOC_EL.scrollWidth, DOC_EL.scrollHeight);
+    };
+
+    const rect_of_win = () => {
+        return Rect(WIN.pageXOffset, WIN.pageYOffset, DOC_EL.clientWidth, DOC_EL.clientHeight);
+    };
+
+    const el_get_offset = el => {
+        const br = el.getBoundingClientRect();
+        return {x: br.left + WIN.pageXOffset, y: br.top + WIN.pageYOffset};
+    };
+
+    const rect_of_el = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x, y, el.offsetWidth, el.offsetHeight);
+    };
+
+    const rect_of_viewport = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
+    };
+
+    const rect_of_content = el => {
+        const {x, y} = el_get_offset(el);
+        return Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
+    };
 
     const calc_scale = (() => {
         const width = canvas.clientWidth;
@@ -81,13 +82,12 @@ module.exports = (canvas, options) => {
     let drag_ry;
 
     const draw_rect = (rect, col) => {
-        if (!col) {
-            return;
+        if (col) {
+            CTX.beginPath();
+            CTX.rect(rect.x, rect.y, rect.w, rect.h);
+            CTX.fillStyle = col;
+            CTX.fill();
         }
-        context.beginPath();
-        context.rect(rect.x, rect.y, rect.w, rect.h);
-        context.fillStyle = col;
-        context.fill();
     };
 
     const apply_styles = styles => {
@@ -106,9 +106,9 @@ module.exports = (canvas, options) => {
 
         resize_canvas(root_rect.w * scale, root_rect.h * scale);
 
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.scale(scale, scale);
+        CTX.setTransform(1, 0, 0, 1, 0, 0);
+        CTX.clearRect(0, 0, canvas.width, canvas.height);
+        CTX.scale(scale, scale);
 
         draw_rect(rect_rel_to(root_rect, root_rect), settings.back);
         apply_styles(settings.styles);
@@ -133,7 +133,7 @@ module.exports = (canvas, options) => {
     const on_drag_end = ev => {
         drag = false;
         canvas.style.cursor = 'pointer';
-        body.style.cursor = 'auto';
+        BODY.style.cursor = 'auto';
         off(WIN, 'mousemove', on_drag);
         off(WIN, 'mouseup', on_drag_end);
         on_drag(ev);
@@ -152,7 +152,7 @@ module.exports = (canvas, options) => {
         }
 
         canvas.style.cursor = 'crosshair';
-        body.style.cursor = 'crosshair';
+        BODY.style.cursor = 'crosshair';
         on(WIN, 'mousemove', on_drag);
         on(WIN, 'mouseup', on_drag_end);
         on_drag(ev);

test/index.js

@@ -1,12 +1,24 @@
+const {test, assert} = require('scar');
+const pagemap = require('../src/pagemap');
+
 if (!global.window) {
     global.window = new (require('jsdom')).JSDOM().window;
 }
 
-const {test, assert} = require('scar');
-const pagemap = require('../src/pagemap');
-
 test('access', () => {
     assert.equal(typeof pagemap, 'function');
 });
 
+test('no canvas throws', () => {
+    assert.throws(() => pagemap(), /getContext/);
+    assert.throws(() => pagemap(true), /getContext/);
+    assert.throws(() => pagemap({}, {}), /getContext/);
+});
+
+// test('basic canvas', () => {
+//     const canvas = global.window.document.createElement('canvas');
+//     const res = pagemap(canvas);
+//     assert.equal(typeof res, 'object');
+// });
+
 test.cli();