forcegraph: hidpi rendering of labels

lib/forcegraph.js

@@ -470,21 +470,25 @@ define(["d3"], function (d3) {
         var name = nodeName(d)
 
         ctx.font = "11px Roboto"
-        var offset = 10
+        var offset = 8
+        var lineWidth = 3
         var width = ctx.measureText(name).width
         var buffer = document.createElement("canvas")
+        var r = window.devicePixelRatio
         var bctx = buffer.getContext("2d")
-        var scale = zoomBehavior.scaleExtent()[1]
-        bctx.lineWidth = 2.5
-        buffer.width = (width + 2 * bctx.lineWidth) * scale
-        buffer.height = (14 + 2 * bctx.lineWidth) * scale
-        bctx.textBaseline = "top"
+        var scale = zoomBehavior.scaleExtent()[1] * r
+        buffer.width = (width + 2 * lineWidth) * scale
+        buffer.height = (16 + 2 * lineWidth) * scale
+        bctx.scale(scale, scale)
+        bctx.textBaseline = "middle"
+        bctx.textAlign = "center"
         bctx.font = ctx.font
-        bctx.strokeStyle = "rgba(255, 255, 255, 0.6)"
+        bctx.lineWidth = lineWidth
+        bctx.lineCap = "round"
+        bctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
         bctx.fillStyle = "rgba(0, 0, 0, 0.6)"
-        bctx.scale(scale, scale)
-        bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth)
-        bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale)
+        bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
+        bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
 
         d.label = buffer
         d.labelWidth = buffer.width / scale