从 SoundCloud 的 Waveform.js 库获得更好的质量

目前我正在使用 Waveform.js (http://waveformjs.org http://waveformjs.org）从 SoundCloud 轨道生成波形。

不幸的是生成的canvas图像质量非常低（尤其是在视网膜上）：

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

您知道如何提高图像质量吗？也许有更好的解决方案来生成此类波形？

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

1. Send waveform_url到可以生成的库canvas/svg/etc.
2. 或者从以下位置获取数据waveform_url我自己并把它送到图书馆。
3. 同步 HTML5 也很棒Audio元素与生成的波形一起播放。

我将不胜感激任何意见和建议。谢谢！

我没有看过这个库的代码。但总体原则上

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

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

这也是参考/样本 http://blog.tripleaxis.com/optimising-html5-canvas-elements-for-retina-screens/