Get better quality from SoundCloud's Waveform.js lib

Question

Currently I'm using Waveform.js (http://waveformjs.org) to generate waveforms from SoundCloud tracks.

Unfortunately the generated canvas has a very low image quality (especially on Retina):

I would like to create Waveform very similar to the Soundcloud one:

Do you know how can I improve the quality of an image? Maybe there's a better solution for generating such waveforms?

My app is completely client-side, everything is done in the browser, so perfect scenario for me will be:

1. Send waveform_url to the library which can generate canvas/svg/etc.
2. Or get the data from waveform_url by myself and feed it to the library.
3. Also it will be superb to sync HTML5 Audio element playing together with generated waveform.

I'll appreciate any input and suggestions. Thanks!

Answer 1

To add on to @XGreen's answer, try inserting the following into waveform.coffee after line 19:

# High DPI Canvas
devicePixelRatio = window.devicePixelRatio || 1
backingStoreRatio = @context.webkitBackingStorePixelRatio || @context.mozBackingStorePixelRatio || @context.msBackingStorePixelRatio || @context.oBackingStorePixelRatio || @context.backingStorePixelRatio || 1
@ratio = devicePixelRatio / backingStoreRatio
if devicePixelRatio isnt backingStoreRatio
  @canvas.width  = @ratio * @width
  @canvas.height = @ratio * @height
  @canvas.style.width  = "#{@width}px"
  @canvas.style.height = "#{@height}px"
  @context.scale @ratio, @ratio

I've created a pull request to merge this change.

Answer 2

I haven't looked at the code of this library. But in general principle

//if canvas context is:
var context = canvas.getContext('2d');

//then the device ratio can be calculated using:
var     devicePixelRatio = window.devicePixelRatio || 1,
        backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,

        ratio = devicePixelRatio / backingStoreRatio;

//now you can scale your canvas and for retina display I think it will be 2 and 2

context.scale(ratio, ratio)

Read the library code and see where you can add this ratio support. Hope this helps.

Here is also a reference/sample