Javascript 从SoundCloud的波形.js库中获得更好的质量

目前我正在使用Waveform.js从SoundCloud轨迹生成波形

不幸的是，生成的画布的图像质量非常低，尤其是在视网膜上：

我想创建与Soundcloud非常相似的波形：

您知道如何提高图像质量吗？也许有更好的办法来产生这样的波形

我的应用程序完全是客户端的，所有事情都在浏览器中完成，所以对我来说最完美的场景是：

将波形url发送到可以生成canvas/svg/etc的库。 或者自己从url中获取数据并将其提供给图书馆。 同时，将HTML5音频元素与生成的波形同步播放也将非常棒。

---

我将感谢任何意见和建议。谢谢

我还没有看过这个库的代码。但在一般原则上

//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)

阅读库代码并查看可以在何处添加此比率支持。希望这有帮助

若要添加到，请尝试在第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

---

我创建了一个用于合并此更改的库。

我可以访问库中的上下文，但缩放没有帮助。下面是应用您的更改后画布的外观-@Kosmetika-excellent。你能把答案标记为正确的并且可能是+1 my，这样其他人以后就不会有这个问题了吗？谢谢