Add button to clear the whiteboard (#9795)

public/offline.html

@@ -67,6 +67,11 @@
       margin-top: 30px;
     }
 
+    #btn-clear, .paletteSelector select {
+      height: 30px;
+      cursor: pointer;
+    }
+
     .colors {
       z-index: 2;
       margin: 0 20px;
@@ -176,6 +181,8 @@
       <option value="default">Default Palette</option>
       <option value="paulTol">Paul Tol Palette</option>
     </select>
+
+    <button type="button" id="btn-clear">Clear</button>
   </div>
   <svg width="75px" height="75px" viewBox="0 0 266 286" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     class="signature">
@@ -334,6 +341,10 @@
       render(palettes[activePalette])
     }
 
+    document.getElementById('btn-clear').addEventListener('click', (e) => {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+    });
+
     // Initialization when page is ready to load, runs once
     (function() {
       render(palettes[activePalette])