Incorrect redraw on resize

[tf]

When the responsive prop is set, the wavform is redrawn on resize. The called drawBuffer method does not clear the canvas, though, before redrawing. This causes the waveform to look a bit less crisp once the viewport has been resized.

Looking at the history of the relevant code snippet I see the following:

There once was a call to the empty method, which was removed at some point to improve handling of pre-rendered peaks.

I do not understand the details of this change yet, but it looks to me as though empty did too much in the first place. It not only clears the canvas, but also resets player progress etc.

That is also why, I guess, a prior change set out to preserve player progress by manually seeking to the previous position again. All of this appears to be unnecessary now that the empty() call has been removed.

Looking at the code of wavesurfer.js, it looks like clearing the canvas could be done by calling

this._wavesurfer.drawer.clearWave();

This, of course, reaches into the internals of wavesufer way too much, which is why I have open an issue there to suggest the addition of a redraw method, as a safe way to redraw the the waveform.

[tf]

Here's a minimal example demonstrating the problems around drawBuffer usind Wavesurfer 1.4.

[tf]

As mentioned in katspaugh/wavesurfer.js#1127 this appears to be a bug in Wavesurfer.js itself. Calling drawBuffer correctly cleared the canvas until 1.3.0.