Progress on saving a merged image.

scripts/core/init.js

@@ -25,5 +25,6 @@ starting_canvas.height = window.innerHeight - 200;
 
 commander.query("~ "+ronin.timestamp());
 commander.query("# "+starting_canvas.render());
+commander.query("# layer=render");
 commander.query("# layer=main");
 commander.query("> 1 0,0 #000000");

scripts/modules/file.save.js

@@ -8,7 +8,8 @@ function FileSave(rune)
   {
     var n = "Ronin Export";
     var f = cmd.variable("format");
-    var d = ronin.surface.merged();
+    var d = ronin.surface.merge();
+    d = ronin.surface.layers["render"].element.toDataURL('image/png');
     var w = window.open('about:blank','image from canvas');
     w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
   }

scripts/modules/overlay.js

@@ -105,8 +105,6 @@ function Overlay(rune)
   {
     this.element.width = rect.width * 2;
     this.element.height = rect.height * 2;
-    this.element.style.left = (window.innerWidth/2)-(rect.width/2);
-    this.element.style.top = (window.innerHeight/2)-(rect.height/2);
     this.element.style.width = rect.width+"px";
     this.element.style.height = rect.height+"px";
     this.context().scale(2,2);

scripts/modules/surface.js

@@ -8,6 +8,7 @@ function Surface(rune)
 
   this.layers = {};
   this.active_layer = null;
+  this.render_layer = null;
 
   this.size = null;
   
@@ -24,23 +25,31 @@ function Surface(rune)
       this.context().fill();
     }
 
-    //
-
     if(cmd.variable("layer")){
-      var layer_name = cmd.variable("layer").value;
+      var name = cmd.variable("layer").value;
-      if(this.layers[layer_name]){
+      if(!this.layers[name]){
-        console.log("Selecting layer:"+layer_name);
+        this.add_layer(new Layer(name,this.size));
-        this.active_layer = this.layers[layer_name];
       }
-      else{
+      this.select_layer(this.layers[name]);
-        console.log("Creating layer:"+layer_name); 
+    }
-        this.layers[layer_name] = new Layer(layer_name,this.size);
+
-        this.active_layer = this.layers[layer_name];
+  }
-        this.element.appendChild(this.active_layer.element);
+
+  this.select_layer = function(layer)
+  {
+    console.log("Selecting layer:"+layer.name);
+    this.active_layer = layer;
+  }
+
+  this.add_layer = function(layer)
+  {
+    console.log("Creating layer:"+layer.name); 
+
+    this.layers[layer.name] = layer;
+    this.active_layer = layer;
+    this.element.appendChild(layer.element);
     this.active_layer.resize(this.size);
   }
-    }
-  }
   
   this.passive = function(cmd)
   {
@@ -94,24 +103,20 @@ function Surface(rune)
     return this.active_layer.context();
   }
 
-  this.merged = function()
+  this.merge = function()
   {
-    var export_canvas = document.createElement("canvas");
+    this.render_layer = this.layers["render"];
-    export_canvas.width = this.size.width;
-    export_canvas.height = this.size.height;
     
+    var a = [];
     Object.keys(ronin.surface.layers).forEach(function (key) {
-      var base_image = new Image();
+      if(key != "render"){
-      base_image.src = ronin.surface.layers[key].element.toDataURL('image/png');
+        a.push(ronin.surface.layers[key]);
-      export_canvas.getContext('2d').drawImage(base_image,0,0);
+      }
     });
-
+    for (i = a.length; i > 0 ; i--) {
-    return this.active_layer.element.toDataURL('image/png');
+      ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,10,10);
-
+    }
-    // this.context().globalCompositeOperation = "copy";
+    return this.render_layer;
-    // this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
-    // this.context().globalCompositeOperation = "source-over";
-
   }
   
   // Cursor

scripts/modules/surface.layer.js

@@ -29,6 +29,22 @@ function Layer(name)
     return this.element.getContext('2d');
   }
 
+  this.image = function()
+  {
+    return this.element.toDataURL('image/png');
+  }
+
+  this.merge = function()
+  {
+    console.log(ronin.surface.render_layer);
+    var ctx = ronin.surface.render_layer.context();
+    var img = new Image();
+    img.onload = function(){
+      ctx.drawImage(img,10,10);
+    };
+    img.src = this.element.toDataURL();
+  }
+
   //
 
   this.widget_cursor = function()