Search code examples
canvashtml5-canvasgojs

GoJS canvas (canvas2d) blurry on 100% zoom

I'm trying to use GoJS to create some nodes using rounded rectangles and some text. This results in the following blurry rendering (at 100% zoom):

blurry node

Not changing anything except opening the dev console (this acts like decreasing zoom it seems) results in the sharp image:

sharp node

A similar look is achievable when zooming out to 80%. Is there any setting, ... I can adjust to get the crisp look at 100% zoom?

The same is true for the attribution text in the upper left corner:

Attribution Sharp attribution

Solution

  • This might have to do with the pixel ratio, but it's not quite clear to me why.

    You can query the pixel ratio GoJS uses by calling myDiagram.computePixelRatio() in the console. This typically changes dynamically during drag operations.

    You can customize the pixel ratio GoJS uses by setting it to a new function:

    myDiagram.computePixelRatio = function() { return 3; }