Implement clear method

Author: martinRenou

examples/introduction.ipynb

@@ -76,6 +76,15 @@
     "c"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "c.clear()"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,

ipycanvas/canvas.py

@@ -33,7 +33,7 @@ class Canvas(DOMWidget):
 
     def __init__(self, *args, **kwargs):
         self.caching = kwargs.get('caching', False)
-        self.commands_cache = []
+        self._commands_cache = []
 
         super(Canvas, self).__init__(*args, **kwargs)
         self.layout.width = str(self.size[0]) + 'px'
@@ -87,14 +87,20 @@ def quadratic_curve_to(self, cp1x, cp1y, x, y):
     def bezier_curve_to(self, cp1x, cp1y, cp2x, cp2y, x, y):
         self._send_canvas_command('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y)
 
+    def clear(self):
+        """Clear the entire canvas."""
+        self._commands_cache = []
+        self.send({'name': 'clear'})
+
     def flush(self):
+        """Flush all the cached commands."""
         if not self.caching:
             return
 
-        self.send(self.commands_cache)
+        self.send(self._commands_cache)
 
         self.caching = False
-        self.commands_cache = []
+        self._commands_cache = []
 
     @observe('fill_style', 'stroke_style', 'global_alpha')
     def _on_set_attr(self, change):
@@ -110,6 +116,6 @@ def _send_canvas_command(self, name, *args):
 
     def _send_command(self, command):
         if self.caching:
-            self.commands_cache.append(command)
+            self._commands_cache.append(command)
         else:
             self.send(command)

src/widget.ts

@@ -33,7 +33,14 @@ class CanvasModel extends DOMWidgetModel {
 
     this.commandsCache = [];
 
-    this.on('msg:custom', (command) => { this.commandsCache.push(command); });
+    this.on('msg:custom', (command) => {
+      if (!(command instanceof Array) && command.name == 'clear') {
+        this.commandsCache = [];
+        return;
+      }
+
+      this.commandsCache.push(command);
+    });
   }
 
   static model_name = 'CanvasModel';
@@ -87,11 +94,17 @@ class CanvasView extends DOMWidgetView {
       return;
     }
 
+    if (command.name == 'clear') {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      return;
+    }
+
     if (command.name == 'set') {
       this.ctx[command.attr] = command.value;
-    } else {
-      this.ctx[command.name](...command.args);
+      return;
     }
+
+    this.ctx[command.name](...command.args);
   }
 
   resize_canvas() {