Found a good flow for load:/draw:

sources/scripts/modules/brush.js

@@ -97,6 +97,11 @@ function Brush()
     ctx.closePath();
   }
 
+  this.pick = function(line)
+  {
+    var pixel = ronin.render.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
+  }
+
   this.mod_size = function(mod)
   {
     this.settings.size = clamp(this.settings.size+mod,1,100);

sources/scripts/modules/frame.js

@@ -41,6 +41,16 @@ function Frame()
     ronin.render.context().putImageData(data, 0, 0);
   }
 
+  this.methods.clear = function(q)
+  {
+    ronin.render.fill("blue");
+  }
+
+  this.methods.fill = function(q)
+  {
+    ronin.render.fill(q);
+  }
+
   this.resize_to = function(size)
   {
     ronin.frame.settings.width = size.width;

sources/scripts/modules/io.js

@@ -2,7 +2,7 @@ function IO()
 {
   Module.call(this,"io","File import/export tools.");
 
-  this.settings = {anchor:{x:0,y:0,width:0,height:0}};
+  this.settings = {anchor:{x:0,y:0,width:200,height:200}};
 
   this.methods = {};
 
@@ -19,30 +19,63 @@ function IO()
       img.src = filepath[0];
 
       img.onload = function() {
-        ronin.io.draw_image(img,ronin.commander.query());
+        ronin.io.draw_image(ronin.render.context(),img,ronin.commander.query());
       }
     });
   }
 
+  this.image = null;
+
   this.methods.load = function(q)
   {
-    // TODO
+    var filepath = dialog.showOpenDialog({properties: ['openFile']});
+
+    if(!filepath){ console.log("Nothing to load"); return; }
+
+    fs.readFile(filepath[0], 'utf-8', (err, data) => {
+      if(err){ alert("An error ocurred reading the file :" + err.message); return; }
+      
+      var img = new Image();
+      img.src = filepath[0];
+
+      img.onload = function() {
+        ronin.io.image = img;
+        ronin.commander.inject("io draw:20,20|100x100");
+      }
+    });
+  }
+
+  this.methods.draw = function(q)
+  {
+    ronin.io.draw_image(ronin.render.context(),ronin.io.image,ronin.commander.query().methods.draw);
+    ronin.io.image = null;
+    ronin.preview.clear();
   }
   
   this.methods.save = function(q)
   {
     // TODO
+    ronin.io.render();
+  }
+
+  this.preview = function(q)
+  {
+    ronin.preview.clear();
+
+    if(ronin.commander.query().methods.draw && this.image){
+      this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);  
+    }
   }
 
   this.render = function()
   {
     var fs = require('fs');
-    var data = ronin.render.to_base64().replace(/^data:image\/\w+;base64,/, "");
+    var data = ronin.render.to_base64('jpg').replace(/^data:image\/\w+;base64,/, "");
     var buf = new Buffer(data, 'base64');
 
     dialog.showSaveDialog((fileName) => {
       if (fileName === undefined){ return; }
-      fs.writeFile(fileName+'.png', buf);
+      fs.writeFile(fileName+'.jpg', buf);
     }); 
   }
 
@@ -79,24 +112,31 @@ function IO()
     var width = parseInt(img.naturalWidth * 0.5);
     var height = parseInt(img.naturalHeight * 0.5);
 
-    if(height > 900){
-      width *= 0.5;
-      height *= 0.5;
-    }
+    // if(height > 700){
+    //   width *= 0.5;
+    //   height *= 0.5;
+    // }
+    // if(height > 1400){
+    //   width *= 0.25;
+    //   height *= 0.25;
+    // }
+
+    ronin.frame.methods.resize({width:parseInt(width),height:parseInt(height)})
 
     img.onload = function() {
       ronin.render.context().drawImage(img, 0,0,width * 2,height * 2);
     }
   }
 
-  this.draw_image = function(img,params)
+  this.draw_image = function(ctx = ronin.preview.context(),img,params)
   {
-    var anchor = ronin.io.settings.anchor;
+    var anchor = params ? params : ronin.io.settings.anchor;
 
+    console.log("draw",ctx)
     var width = parseInt(img.naturalWidth * 0.5);
     var height = parseInt(img.naturalHeight * 0.5);
     var scale = (anchor.width/width) * 2;
 
-    ronin.render.context().drawImage(img, anchor.x * 2,anchor.y * 2,width * scale,height * scale);    
+    ctx.drawImage(img, anchor.x * 2,anchor.y * 2,width * scale,height * scale);    
   }
 }

sources/scripts/modules/path.js

@@ -20,9 +20,20 @@ function Path()
     ctx.closePath();
   }
 
-  this.methods.fill = function()
+  this.methods.fill = function(q)
   {
-    
+    ronin.preview.clear();
+
+    var path = ronin.path.create_path(q);
+
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.lineCap = "butt";
+    ctx.lineWidth = 30;
+    ctx.fillStyle = "black";
+    ctx.fill(new Path2D(path));
+    ctx.closePath();
   }
 
   this.preview = function(q)