处理Js动画在缩放视网膜显示后看起来模糊

Question

所以我有这个全球动画。这是一个js小提琴。 https://jsfiddle.net/j6sz4e1L/1/

和截图 第一个是工作版本，与第二个相比模糊不清，但第二个版本并不模糊，但其渲染的3/4渲染非常奇怪。

它工作正常，但在我缩放之前仍然有点模糊，然后动画的某些部分看起来很奇怪。我缩放它的原因是它在Macbook pro视网膜上看起来更清晰。当您在脚本末尾注释掉javascript时，它可以正常运行而不会有任何奇怪但文本看起来不那么干净。

如果有人有html5画布和具体处理.js的经验，请告诉我如何实现所需的目标（这是使文本在Retina显示屏上更清晰），而不会出现现在发生的奇怪现象。

感谢任何花时间研究这个问题的人。这是我使用的javascript的代码。它与我在jsfiddle上的内容基本相同。关于processing.js部分，可以在jsfiddle中找到完整的代码。

进行缩放的Javascript代码

var canvas = document.getElementById("2d"),
      context = canvas.getContext("2d"),
      processingInstance;
      // desiredWidth = 486,
      // desiredHeight = 432,
    processingInstance = Processing.getInstanceById("2d");

    var desiredWidth = canvas.width,
      desiredHeight = canvas.height,
      scaleFactor = 2;
      canvas.width = desiredWidth * scaleFactor;
      canvas.height = desiredHeight * scaleFactor;
      canvas.style.width = desiredWidth + "px";
      canvas.style.height = desiredHeight + "px";
      // processingInstance.width = desiredWidth * scaleFactor;
      // processingInstance.height = desiredHeight * scaleFactor;
      // processingInstance.scale(2);
      context.scale(scaleFactor, scaleFactor);