diff --git a/js/draw.js b/js/draw.js
new file mode 100644
index 0000000000000000000000000000000000000000..b597379add0fa85220ef1e97ceb377fa390b634f
--- /dev/null
+++ b/js/draw.js
@@ -0,0 +1,163 @@
+(function(factory) {
+  //namespacing
+  if(!window["Explosurf"]) {
+    window["Explosurf"] = {} ;
+  }
+  if(!window["Explosurf"]["draw"]) {
+    window["Explosurf"]["draw"] = {} ;
+  }
+  factory(window["Explosurf"]["draw"]) ;
+})(function(Draw) { //namespace Explosurf.draw
+
+var area = document.getElementById("draw-area") ;
+var ctx = area.getContext("2d") ;
+var center_img = document.getElementById("tile_center") ;
+var cursor = document.createElement('img') ;
+cursor.src = window.location.href.split('/').slice(0, -2).join('/') + '/Images/bonhomme.png' ;
+
+var pad = {
+  tiles : {},
+
+  xmax : 0,
+  xmin : 0,
+  ymax : 0,
+  ymin : 0,
+
+  pen : {
+    x : 0,
+    y : 0,
+  },
+}
+
+function recompute_minmax() {
+  var initialized = false ;
+  for(key in pad.tiles) {
+    var pen = JSON.parse(key) ;
+    if(! initialized) {
+      pad.xmin = pen.x ;
+      pad.xmax = pen.x ;
+      pad.ymin = pen.y ;
+      pad.ymax = pen.y ;
+      initialized = true ;
+    } else {
+      pad.xmax = pad.xmax < pen.x ? pen.x : pad.xmax ;
+      pad.xmin = pad.xmin > pen.x ? pen.x : pad.xmin ;
+      pad.ymax = pad.ymax < pen.y ? pen.y : pad.ymax ;
+      pad.ymin = pad.ymin > pen.y ? pen.y : pad.ymin ;
+    }
+  }
+}
+
+function redraw() {
+  ctx.clearRect(0,0,area.width, area.height) ;
+
+  var xmin = pad.pen.x < pad.xmin ? pad.pen.x : pad.xmin ;
+  var xmax = pad.pen.x > pad.xmax ? pad.pen.x : pad.xmax ;
+  var ymin = pad.pen.y < pad.ymin ? pad.pen.y : pad.ymin ;
+  var ymax = pad.pen.y > pad.ymax ? pad.pen.y : pad.ymax ;
+
+  var wx = xmax - xmin + 1;
+  var wy = ymax - ymin + 1;
+
+  var sx = Math.floor(area.width / wx) ;
+  var sy = Math.floor(area.height / wy) ;
+
+  var s = sx < sy ? sx : sy ;
+  s = s > 256 ? 256 : s ;
+
+  var ox = Math.floor(area.width / 2 - (xmin + wx / 2)*s)  ;
+  var oy = Math.floor(area.height / 2 - (ymin + wy / 2)*s)  ;
+
+  var base_path = window.location.href.replace(/[^\/]*$/,'') ;
+  var img = new Image() ;
+  for(key in pad.tiles) {
+    var pen = JSON.parse(key) ;
+    img.src = base_path + pad.tiles[key] ;
+    ctx.drawImage(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
+  }
+  
+  var cs = s / 3 ;
+  ctx.drawImage(cursor, ox + pad.pen.x * s + cs, oy + pad.pen.y * s + cs, cs, cs) ;
+}
+
+Draw.redraw = redraw ;
+
+function stamp() {
+  var key = JSON.stringify(pad.pen) ;
+  var src = center_img.src.split('/').pop() ;
+  pad.tiles[key] = src ;
+
+  pad.xmax = pad.xmax < pad.pen.x ? pad.pen.x : pad.xmax ;
+  pad.xmin = pad.xmin > pad.pen.x ? pad.pen.x : pad.xmin ;
+  pad.ymax = pad.ymax < pad.pen.y ? pad.pen.y : pad.ymax ;
+  pad.ymin = pad.ymin > pad.pen.y ? pad.pen.y : pad.ymin ;
+}
+
+Draw.stamp = stamp ;
+
+function clear() {
+  var key = JSON.stringify(pad.pen) ;
+  delete pad.tiles[key] ;
+  recompute_minmax() ;
+}
+
+function clear_all() {
+  pad.tiles = {} ;
+  pad.xmin = 0 ;
+  pad.xmax = 0 ;
+  pad.ymin = 0 ;
+  pad.ymax = 0 ;
+  pad.pen.x = 0 ;
+  pad.pen.y = 0 ;
+}
+
+Draw.clear = clear_all ;
+
+function go(direction) {
+    if(direction === 0) {
+      pad.pen.x += 1 ;
+    } else if(direction === 1) {
+      pad.pen.y -= 1 ;
+    } else if(direction === 2) {
+      pad.pen.x -= 1 ;
+    } else if(direction === 3) {
+      pad.pen.y += 1 ;
+    }
+}
+
+Draw.go = go ;
+
+document.getElementById('draw-right').addEventListener(
+    'click',
+    function() {go(0) ; redraw() ;}
+    ) ;
+document.getElementById('draw-up').addEventListener(
+    'click',
+    function() {go(1) ; redraw() ;}
+    ) ;
+document.getElementById('draw-left').addEventListener(
+    'click',
+    function() {go(2) ; redraw() ;}
+    ) ;
+document.getElementById('draw-down').addEventListener(
+    'click',
+    function() {go(3) ; redraw() ;}
+    ) ;
+
+document.getElementById('draw-clear').addEventListener(
+    'click',
+    function() {clear() ; redraw() ;}
+    ) ;
+document.getElementById('draw-clear-all').addEventListener(
+    'click',
+    function() {clear_all() ; redraw() ;}
+    ) ;
+document.getElementById('draw-stamp').addEventListener(
+    'click',
+    function() {stamp() ; redraw() ;}
+    ) ;
+
+
+redraw() ;
+
+})//end of namespace Explosurf.draw