Ensure canvas elements are cleared before redrawing (#1144)

refs #1127

Before #909, calling `drawBuffer` to redraw the wave invoked
`drawer.drawPeaks` which in turn invoked `drawer.setWidth` which
always caused the canvas to be cleared as a side effect of
`drawer.updateSize`.

In #909 `setWidth` was changed to short circuit if the width did not
change. This now causes the waveform to be redrawn on top of the
previous rendition, making the edges of the wave appear less crisp.

This change makes `setWidth`/`setHeight` return a boolean to indicate
whether changes were needed. If not, `drawer.clearWave` is called
manually. So we make sure that the previous wave is always cleared,
but do not perform the possibly performance intensive task of clearing
the canvas twice if it already happened as a side effect of
`setWidth`.

src/drawer.js

@@ -88,7 +88,9 @@ WaveSurfer.Drawer = {
     },
 
     drawPeaks: function (peaks, length, start, end) {
-        this.setWidth(length);
+        if (!this.setWidth(length)) {
+            this.clearWave();
+        }
 
         this.params.barWidth ?
             this.drawBars(peaks, 0, start, end) :
@@ -154,7 +156,7 @@ WaveSurfer.Drawer = {
 
     setWidth: function (width) {
         if (this.width == width) {
-          return;
+            return false;
         }
 
         this.width = width;
@@ -170,15 +172,22 @@ WaveSurfer.Drawer = {
         }
 
         this.updateSize();
+        return true;
     },
 
     setHeight: function (height) {
-        if (height == this.height) { return; }
+        if (height == this.height) {
+            return false;
+        }
+
         this.height = height;
+
         this.style(this.wrapper, {
             height: ~~(this.height / this.params.pixelRatio) + 'px'
         });
+
         this.updateSize();
+        return true;
     },
 
     progress: function (progress) {