Fixed a bug where the canvas would get transparent bg upon erase

1 files changed, 7 insertions, 4 deletions

diff --git a/app/javascript/mastodon/features/ui/components/doodle_modal.js b/app/javascript/mastodon/features/ui/components/doodle_modal.js
index 7f91b848d..d13f9604a 100644
--- a/app/javascript/mastodon/features/ui/components/doodle_modal.js
+++ b/app/javascript/mastodon/features/ui/components/doodle_modal.js
@@ -17,10 +17,15 @@ export default class DoodleModal extends ImmutablePureComponent {
 
   handleKeyUp = (e) => {
     if (e.key === 'Delete' || e.key === 'Backspace') {
-      this.sketcher.clear();
+      this.clearScreen();
     }
   }
 
+  clearScreen () {
+    this.sketcher.context.fillStyle = 'white';
+    this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
   componentDidMount () {
     window.addEventListener('keyup', this.handleKeyUp, false);
   }
@@ -36,9 +41,7 @@ export default class DoodleModal extends ImmutablePureComponent {
     if (elem) {
       this.sketcher = new Atrament(elem, 500, 500, 'black');
 
-      // pre-fill with white
-      this.sketcher.context.fillStyle = 'white';
-      this.sketcher.context.fillRect(0, 0, elem.width, elem.height);
+      this.clearScreen();
 
       // .smoothing looks good with mouse but works really poorly with a tablet
       this.sketcher.smoothing = false;