3

Suppose that I have the following code:

var canvas = new fabric.Canvas('c');

var text = new fabric.Text('Some text', {
  left: 100,
  top: 100
});
canvas.add(text);

$('#canvas-wrapper').mousewheel(function(e) {
  if (e.originalEvent.deltaY < 0) {
    canvas.setZoom(canvas.getZoom() * 1.1);
  } else {
    canvas.setZoom(canvas.getZoom() / 1.1);
  }
});

https://jsfiddle.net/1xv4vp8e/

Note how text blurs when you zoom the canvas (just use your mouse wheel and you'll notice it).

Is there any way to fix it so the text won't have that blurry effect?

FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
  • Can't repro, neither on FF nor chrome on osx. – Kaiido Nov 28 '16 at 13:56
  • The text should not blur anymore than the standard canvas text. Fonts are vector based images. Please provide an image of the blured text so we can see the problem as the fiddle shows normal canvas behaviour. – Blindman67 Nov 28 '16 at 15:10
  • @Blindman67 Here you go -- http://i.imgur.com/YHLfsbx.png – FrozenHeart Nov 28 '16 at 16:02
  • @Kaiido I've just tested it in Chrome, see the previous comment – FrozenHeart Nov 28 '16 at 16:03
  • @Kaiido Firefox too – FrozenHeart Nov 28 '16 at 16:06
  • Looks like you might have a Retina (hi res) display. See http://stackoverflow.com/a/39951701/3877726 for info. If increasing the canvas resolution still leaves you unsatified with the canvas text quality http://stackoverflow.com/a/40074278/3877726 may help, but you will have to do your text rendering outside of Fabric – Blindman67 Nov 28 '16 at 16:16
  • @Blindman67 By the way, are all Fabric.js fonts / text vector-based? – FrozenHeart Nov 28 '16 at 16:21
  • @Blindman67 Also, I see the same problem on non-Mac computer – FrozenHeart Nov 28 '16 at 16:22
  • fabric is retina enabled. Also i cannot reproduce. – AndreaBogazzi Nov 28 '16 at 16:38
  • @AndreaBogazzi Are you totally sure? Because I've repro this problem on Windows and Mac OS with Firefox, Chrome and Safari – FrozenHeart Nov 28 '16 at 16:39
  • i cannot reproduce it. I have crisp text on macos chrome. when zooming in and out on that fiddle. Sure that there is no browser zoom active or maybe something else related to native resolution of monitor? – AndreaBogazzi Nov 28 '16 at 16:40
  • @FrozenHeart All fonts are vector based. – Blindman67 Nov 28 '16 at 16:41
  • @AndreaBogazzi fabric can not be "Retina" aware as there is no consistent way for javascript to know what the zoom level is. See the first link I gave to how to ensure (for FF, Chrome current) a 1-1 pixel canvas on hi res (also called retina if you are apple users) displays – Blindman67 Nov 28 '16 at 16:46
  • @AndreaBogazzi That kinda strange. What resolution do you have? – FrozenHeart Nov 28 '16 at 16:46
  • 1
    So ok @Blindman67 fabric is devicePixelRatio aware, that is the best thing we can do to support retina nowadays. When they will separate screen tech spec and browser zoom in 2 separate properties then situation will improve. As of now for people that do not play with browser zoom that much, or that they do after loading the page, we can say that fabric is retina aware. – AndreaBogazzi Nov 28 '16 at 16:48
  • @AndreaBogazzi did you try to zoom in both directions? – FrozenHeart Nov 28 '16 at 16:50
  • @AndreaBogazzi I wonder what's this (http://fabricjs.com/test/svg_export/text.html) example is about. It looks like we have blurry text on the left there, and normal one on the right side. How can I achieve that? – FrozenHeart Nov 29 '16 at 01:27

0 Answers0