diff --git a/js/mobius.js b/js/mobius.js
index 613dff4..369a07e 100644
--- a/js/mobius.js
+++ b/js/mobius.js
@@ -1,10 +1,13 @@
 
 function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
+
     var container = document.createElement('div'); //Create the slider container
+    $(container).data('complex',variable)
+    container.id = label;
     container.className ="slider-container";
     parent.append(container);
+    var slider = document.createElement('div');//Create the actual slider handle
 
-    var slider = document.createElement('div'); //Create the actual slider handle
     slider.className = "sliderHandle";
     $(slider).draggable({
         containment: "parent",
@@ -13,13 +16,18 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
         drag: function(event, ui){//When it's dragged, call this function
             
             variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y));
-               
 
+            $(container).data('complex',variable)
             imNum.nodeValue = 'im: ' +variable['im'].toFixed(3)
             reNum.nodeValue = 're: ' +variable['re'].toFixed(3)
 
+            //method that updates current canvas
+            render();
+
         }
     });
+    slider.addEventListener("drag",function(){console.log('hello')})
+
     container.append(slider);
 
     var caption = document.createElement('p');
@@ -28,19 +36,67 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) {
     container.append(caption);
 
     var value = document.createElement('div');
+    
     var br = document.createElement('br');
     
     var imNum = document.createTextNode('im: '+variable['im']);
-    var newLine = document.createTextNode('\n'); 
+    
     var reNum = document.createTextNode('re: '+variable['re']); 
+    //value.id = label
+    
+
+
     value.append(imNum);
     value.append(br)
     value.append(reNum);
     parent.append(value);
 }
 
-function add_vector_field(parent,variable){
+function add_vector_field(parent){
+    var canvas = document.createElement('canvas');
+    canvas.style.border   = "1px solid";
+    canvas.id = 'canvas'
+    canvas.height = 600;
+    canvas.width = 600
+    ctx = canvas.getContext('2d');
     
+    height = canvas.height;
+    width = canvas.width;
+    parent.append(canvas);
+}
+
+//update based on id
+function update_vector_field(a,b,c,d){
+    canvas = document.getElementById('canvas')
+    ctx = canvas.getContext('2d')
+
+    ctx.moveTo(0,0);
+    ctx.clearRect(0,0,600,600)
+    for(var i = 0;i<10;i++){
+        for(var j = 0;j<10;j++){
+            x = remap(i,0,10,-2,2);
+            y = remap(i,0,10,-2,2);
+            res = mobius(a,b,c,d,new Complex(x,y));
+            pxx = remap(i,0,10,0,600);
+            pyy = remap(j,0,10,600,0); //flip y
+            rx = remap(res.re,-2,2,0,600);
+            ry = remap(res.im,-2,2,600,0); //flip y
+            ctx.beginPath();
+            ctx.moveTo(pxx,pyy);
+            ctx.lineTo(rx,ry);
+            ctx.lineTo(0,100)
+            ctx.stroke();
+        }   
+    }
+}
+
+function render(a,b,c,d){
+    a = $(document.getElementById('a')).data('complex');
+    b = $(document.getElementById('b')).data('complex');
+    c = $(document.getElementById('c')).data('complex');
+    d = $(document.getElementById('d')).data('complex');    
+    update_vector_field(a,b,c,d)
+
 }
 
 var Complex = function(_re,_im){
@@ -83,6 +139,7 @@ var c = new Complex(0,0);
 var d = new Complex(0,0);
 
 $(function () {//document is ready, setup everything
+
     //Create GUI div
     guibox = document.createElement('div');
     guibox.id = "gui-box"
@@ -92,4 +149,7 @@ $(function () {//document is ready, setup everything
     add_2d_ctrl($(guibox),b,"b",-1,1,-1,1);
     add_2d_ctrl($(guibox),c,"c",-1,1,-1,1);
     add_2d_ctrl($(guibox),d,"d",-1,1,-1,1);
+
+    add_vector_field($(guibox));
+
 });
diff --git a/mobius.html b/mobius.html
index 1272009..00bae48 100644
--- a/mobius.html
+++ b/mobius.html
@@ -4,13 +4,17 @@
     <title>Mobius Transforms</title>
 </head>
 <body>
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
     <script type="text/javascript" src="js/dat.gui.min.js"></script>
     <script type="text/javascript" src="js/three.min.js"></script>
     <script type="text/javascript" src="js/mobius.js"></script>
-    <script type="text/javascript" src="js/render.js"></script>
+    <!--script type="text/javascript" src="js/render.js"></script-->
+
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+
     <link rel="stylesheet" href="style\style.css">
 </body>
 </html>
\ No newline at end of file
diff --git a/style/style.css b/style/style.css
index d997151..6d4a28c 100644
--- a/style/style.css
+++ b/style/style.css
@@ -2,11 +2,7 @@ body{
     margin: 0;
 }
 
-canvas{
-    width: 100%;
-    height: 100%;
-    padding: 0;
-}
+
 
 .slider-container {
     width: 100px;