clear canvas when loading new images

index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>image-rater</title>
-  <script src="https://unpkg.com/@niivue/niivue@0.6.0/dist/niivue.js"></script>
+  <script type="text/javascript" src="niivue.js"></script>
 
 
 </head>
@@ -14,7 +14,7 @@
     <h1>Image to rate</h1>
   </section>
   <section>
-    <canvas id="gl" height=480 width=640></canvas>
+    <canvas style="background-color: black;" id="gl" height=480 width=640></canvas>
   </section>
   <section>
     <button onclick="nextImage()">
@@ -27,10 +27,13 @@
 let index = 0
  // Niivue will adjust the canvas to 100% of its parent container's size 
  // the parent element can be any size you want (small or large)
- var nv = new niivue.Niivue()
- nv.attachTo('gl') // the canvas element id
+//  var nv = new niivue.Niivue()
+//  nv.attachTo('gl') // the canvas element id
 //  nv.loadVolumes(volumeList)
 //  nv.setSliceType(nv.sliceTypeMultiPlanar)
+var nv = null
+    nv = new niivue.Niivue()
+    nv.attachTo('gl') // the canvas element id
 
 let nextImage = () => {
   fetch('/next')
@@ -54,6 +57,9 @@ let nextImage = () => {
 
       }
     ]
+    var nv = null
+    nv = new niivue.Niivue()
+    nv.attachTo('gl') // the canvas element id
     nv.loadVolumes(v)
     v[0].cal_min = 0
     v[0].cal_max = 100

index.js

@@ -28,9 +28,10 @@ getFilesRecursively(dir)
 fileIdx = -1
 //process.exit()
 
-app.get('/', (req, res) => {
-  res.sendFile('index.html', {root: '.'})
-})
+app.use('/', express.static(__dirname))
+// app.get('/', (req, res) => {
+//   res.sendFile('index.html', {root: '.'})
+// })
 
 app.get('/base/:index', (req, res) => {
   res.sendFile(files[req.params.index])

package.json

@@ -10,5 +10,8 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "pkg": "^5.3.1"
   }
 }