From c32c0092567c905502a9f4f4936ff730a13c6817 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Tue, 6 Dec 2016 23:36:33 -0700
Subject: [PATCH] Canvas does not clear the canvas on resize, added crop
 feature.

---
 scripts/modules/canvas.js  | 17 +++++++++++++----
 scripts/modules/overlay.js | 20 +-------------------
 scripts/unit.js            |  2 +-
 3 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js
index a5c96f4..1e8bddd 100644
--- a/scripts/modules/canvas.js
+++ b/scripts/modules/canvas.js
@@ -2,7 +2,7 @@ function Canvas(element)
 {
   Module.call(this);
 
-  this.parameters = [Rect,Color,Bang];
+  this.parameters = [Rect,Position,Color,Bang];
   this.element = element;
   
   this.active = function(cmd)
@@ -10,7 +10,7 @@ function Canvas(element)
     if(cmd.bang()){ this.clear(); }
     
     if(cmd.rect()){
-      this.resize(cmd.rect());
+      this.resize(cmd.rect(),cmd.position());
       ronin.overlay.resize(cmd.rect());
     }
     
@@ -25,14 +25,17 @@ function Canvas(element)
   this.passive = function(cmd)
   {
     if(cmd.rect()){
-      ronin.overlay.show_guide(null,cmd.rect());
+      ronin.overlay.draw(cmd.position(),cmd.rect());
     }
   }
   
   //
   
-  this.resize = function(rect)
+  this.resize = function(rect, position = null)
   {
+    var canvas_pixels = ronin.canvas.element.toDataURL("image/png");
+    var pixels_rect   = new Rect(this.element.width+"x"+this.element.height);
+    
     this.element.setAttribute('width',rect.width+"px");
     this.element.setAttribute('height',rect.height+"px");
     this.element.style.left = (window.innerWidth/2)-(rect.width/2);
@@ -42,6 +45,12 @@ function Canvas(element)
     ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
     
     ronin.widget.update();
+    
+    base_image = new Image();
+    base_image.src = canvas_pixels;
+    
+    if(!position){ position = new Position("0,0");}
+    ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
   }
   
   this.context = function()
diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js
index e410068..1dd5b87 100644
--- a/scripts/modules/overlay.js
+++ b/scripts/modules/overlay.js
@@ -23,7 +23,7 @@ function Overlay(element)
   {
     this.clear();
     
-    if(!position){ return; }
+    if(!position){ position = new Position("0,0"); }
     
     if(rect){
       this.draw_rect(position,rect);
@@ -110,24 +110,6 @@ function Overlay(element)
     this.element.style.top = (window.innerHeight/2)-(rect.height/2);
   }
   
-  this.show_guide = function(position,rect)
-  {
-    this.clear();
-    this.context().beginPath();
-    
-    this.context().moveTo(0,0);
-    this.context().lineTo(rect.width,0);
-    this.context().lineTo(rect.width,rect.height);
-    this.context().lineTo(0,rect.height);
-    this.context().lineTo(0,0);
-    
-    this.context().lineCap="round";
-    this.context().lineWidth = 1;
-    this.context().strokeStyle = "#ff0000";
-    this.context().stroke();
-    this.context().closePath();
-  }
-  
   this.context = function()
   {
     return this.element.getContext('2d');
diff --git a/scripts/unit.js b/scripts/unit.js
index ace87e1..6215b5d 100644
--- a/scripts/unit.js
+++ b/scripts/unit.js
@@ -2,6 +2,6 @@ function Unit()
 {
   this.render = function()
   {
-    return "HEY!";
+    return "[MISSING]";
   }
 }
\ No newline at end of file