using canvas for image view

static/dbViewer.js

@@ -28,15 +28,18 @@ DBViewerTemplate.innerHTML = `
         <div id="image-file-list">
             <ul>
         </div>
-        -->
         <div id="image-view">
-            <div id="original-image">
-                <img src="static/GeoEyeLarge-2.jpg">
-            </div>
+            
             <div id="slice-image">
                 <img src="static/default.jpg">
             </div>
         </div>
+        -->
+        <div id="original-image" style="display:none;">
+                <img id="image" src="static/GeoEyeLarge-2.jpg">
+            </div>
+        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
+        </canvas> 
     </div>
 `;
 
@@ -48,6 +51,8 @@ class DBViewer extends HTMLElement {
     constructor() {
         super();
         this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
+
+        
     }
 
     copyImageToStatic( newImage ) {
@@ -60,6 +65,15 @@ class DBViewer extends HTMLElement {
     }
 
     connectedCallback() {
+        var canvas = document.getElementById('myCanvas');
+        var ctx = canvas.getContext('2d');
+        var image = document.getElementById('image');
+        console.log( image )
+        image.addEventListener('load', e => {
+            console.log( "test" );
+            ctx.drawImage( image, 0, 0 );
+        });
+
         //this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
     }
 

static/dbViewerStyles.css

@@ -6,16 +6,19 @@
 db-viewer { 
     width: 100%;
     height: 100%;
-    overflow: scroll;
 }
 
 .db-view-container {
+
+    width: 100%;
+    height: 100%;
+    /*
     display: grid;
     grid-template-columns: auto; 
     grid-template-rows: auto;
 
     grid-template-areas: 
-    "image-view";
+    "image-view";*/
 }
 
 #image-file-list {