Clear canvas before redrawing

css/converse.css

@@ -6864,7 +6864,6 @@ body.reset {
       #conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
         color: #818479; }
   #conversejs canvas {
-    background: #777;
     border-radius: 4px; }
   #conversejs .fa {
     color: #A8ABA1; }
@@ -8421,7 +8420,6 @@ body.reset {
       width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
-    background: #818479;
     height: 36px;
     vertical-align: middle;
     width: 36px; }

css/inverse.css

@@ -6864,7 +6864,6 @@ body.reset {
       #conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
         color: #818479; }
   #conversejs canvas {
-    background: #777;
     border-radius: 4px; }
   #conversejs .fa {
     color: #A8ABA1; }
@@ -8609,7 +8608,6 @@ body {
       width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
-    background: #818479;
     height: 36px;
     vertical-align: middle;
     width: 36px; }

sass/_core.scss

@@ -163,7 +163,6 @@ body.reset {
     }
 
     canvas {
-        background: $text-color;
         border-radius: $chatbox-border-radius;
     }
 

sass/_messages.scss

@@ -125,7 +125,6 @@
 
             .avatar {
                 margin-top: 0.5em;
-                background: $gray-color;
                 height: 36px;
                 vertical-align: middle;
                 width: 36px;

src/converse-message-view.js

@@ -146,6 +146,7 @@
                     img.onload = () => {
                         const ctx = canvas_el.getContext('2d'),
                               ratio = img.width / img.height;
+                        ctx.clearRect(0, 0, canvas_el.width, canvas_el.height);
                         if (ratio < 1) {
                             ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * (1 / ratio));
                         } else {