Fabric.js: Support for High-DPI Displays

Created on 15 Nov 2012 · 11Comments · Source: fabricjs/fabric.js

Considering all these newfangled Apple products coming out with Retina displays, it would be desirable to use window.devicePixelRatio to improve canvas resolution on said displays, while also preserving object selection functionality, for all Fabric canvases added to the document. The obvious means, doubling the height and width of the canvas and styling it down to regular size... doesn't seem to work.

possible_feature

Source

cryptoquick

Most helpful comment

I've been using this in my code and it seems to work pretty well.

if( window.devicePixelRatio !== 1 ){

  var c = canvas.getElement(); // canvas = fabric.Canvas
  var w = c.width, h = c.height;

// Scale the canvas up by two for retina
// just like for an image
  c.setAttribute('width', w*window.devicePixelRatio);
  c.setAttribute('height', h*window.devicePixelRatio);

// then use css to bring it back to regular size
// or set it here
//    c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')
// or jQuery  $(c).css('width', w);
//      $(c).css('width', w);
//      $(c).css('height', h);

// finally set the scale of the context
  c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);

}

It's basically the same strategy as with images, make a 2X larger version and scale it down with CSS.

paulkaplan on 22 Jul 2013

👍3

All 11 comments

kangax on 16 Nov 2012

Some sort of "pixel density" customizable attribute like that would also be useful in easily creating higher quality rasters (.pngs).

edit: You can already do this with toDataURLWithMultiplier: function (format, multiplier, quality), thanks kangax that is fantastic!

jmagrippis on 14 Feb 2013

You can already do this with toDataUrlWithMultiplier

On Feb 14, 2013, at 11:49 AM, Magrippinho [email protected] wrote:

Some sort of "pixel density" customizable attribute like that would also be useful in easily creating higher quality rasters (.pngs).

—
Reply to this email directly or view it on GitHub.

kangax on 14 Feb 2013

I've been using this in my code and it seems to work pretty well.

if( window.devicePixelRatio !== 1 ){

  var c = canvas.getElement(); // canvas = fabric.Canvas
  var w = c.width, h = c.height;

// Scale the canvas up by two for retina
// just like for an image
  c.setAttribute('width', w*window.devicePixelRatio);
  c.setAttribute('height', h*window.devicePixelRatio);

// then use css to bring it back to regular size
// or set it here
//    c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')
// or jQuery  $(c).css('width', w);
//      $(c).css('width', w);
//      $(c).css('height', h);

// finally set the scale of the context
  c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);

}

It's basically the same strategy as with images, make a 2X larger version and scale it down with CSS.

paulkaplan on 22 Jul 2013

👍3

@paulkaplan Interesting. I would be curious to see this in action, if you could create jsfiddle or something similar.

kangax on 22 Jul 2013

http://buildaweso.me/project/2013/7/21/more-fun-with-bezier-curves

paulkaplan on 22 Jul 2013

:thumbsup: @paulkaplan your scaling method works very well. thanks!